простой слайдер для картинок в 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


7 комментариев:

  1. А что, простота часто - то, что надо! Спасибо за шикарный пост. Полезен, как всегда )))

    ОтветитьУдалить
  2. Спасибо, Виктория. Для меня тоже, чем проще тем лучше.

    ОтветитьУдалить
  3. Вика, здравствуйте! Что такое адрес страницы (где?), что такое адрес картинки.jpg (URL картинки или ссылка?), почему картинка только в формате jpg?

    ОтветитьУдалить
  4. Здравствуйте Татьяна. Каждая страница в интернете имеет свой адрес. Посмотрите в строке браузера. Именно эта страница с адресом http://www.shpargalochki.ru/2018/04/prostoj-slajder-dlya-kartinok-blogger.html Так вот где написано адрес страницы в коде это та страница куда при клике на картинку попадёт читатель.
    Про картинку ссылку прочитайте здесь http://www.shpargalochki.ru/2014/02/ssylka-kartinka-dlja-bloga.html
    Так же и картинки . Нажмите на картинку вверху поста правой кнопкой мыши и в окне увидите функцию копировать URL картинки.


    Может этот пост ещё пригодится http://www.shpargalochki.ru/2015/05/kak-rabotat-s-izobrazhenijami-bloga.html
    Картинка может быть и в другом формате ,Это в коде так написала. Просто не разумно ставить GIF или PNG поскольку они тяжелее .

    ОтветитьУдалить
  5. Спасибо за ответ. Не получается как у вас. Работает первая часть кода в виде обычного слайдера, но в первой картинке есть слово "рамки" - зачем?, последняя картинка отражается под первой, после удаления последней картинке - просто слайдер, сдвинутый влево. Даже в таком виде очень надо. Как сделать слайдер по центру?

    ОтветитьУдалить
  6. Татьяна, покажите мне что у Вас получилось. Я из написанного мало что поняла. Дайте ссылку. Слово "рамки" это alt изображения. Читаем здесь http://www.shpargalochki.ru/2013/12/budem-optimizirovat-kartinki-v-bloge.html
    Чтобы центрировать заключите весь код в теги

    <center> </center>

    ОтветитьУдалить
  7. Татьяна, вышлите мне через форму связи (выше) код, который вы устанавливаете с вашими картинками.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск