простой слайдер для картинок в Blogger

Всем, доброго времени суток. Самый обычный слайдер для изображений в сайдбаре блога на CSS.

Картинки кликабельные, прокрутка идёт справа налево и обратно. Совсем простой в установке. Подберите нужные картинки для него, скопируйте приведённый ниже код, и установите адреса ваших изображений, адреса страниц, куда переведёт картинка при клике.

Готовый код устанавливаем в гаджет HTML/JavaScript в сайдбаре блога. Так же можно разместить любые баннеры ваших партнёрских программ или что - то другое.

Демонстрация 

<div class="slider">

<figure>

<a href="адрес страницы"><img src="адрес картинки.jpg" alt="рамки"></a>

<a href="адрес страницы"><img src="адрес картинки.jpg" alt=""></a>

<a href="адрес страницы"><img src="адрес картинки.jpg"alt=""></a>

<a href="адрес страницы"><img src="адрес картинки.jpg"  alt=""></a>

<a href="адрес страницы"><img src="адрес картинки.jpg" alt=""></a>

</figure>

</div>



<style>

@keyframes slidy {

0% {left: 0%;}

20% {left: 0%;}

25% {left: -100%;}

45% {left: -100%;}

50% {left: -200%;}

70% {left: -200%;}

75% {left: -300%;}

95% {left: -300%;}

100% {left: -400%;}

}

.slider {overflow: hidden; margin: 0; width: 325px;}

.slider figure img {width: 20%; float: left; height: 310px;}

.slider figure {

position: relative;

width: 500%;

margin: 0;

left: 0;

text-align: left;

font-size: 0;

animation: 15s slidy infinite alternate;

}

</style>

Ширину и высоту слайдов  width: 325px; height: 310px;  можно менять на своё усмотрение. Если сделать более крупные картинки, то такой слайдер красиво смотрится если расположить его над гаджетом <<сообщения>>.

Другие варианты слайдеров вы можете посмотреть у меня на странице << все статьи >> в разделе картинки.

Спасибо всем за визит и до встречи.

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email