Всем, доброго времени суток. Самый обычный слайдер для изображений в сайдбаре блога на CSS.
Картинки кликабельные, прокрутка идёт справа налево и обратно. Совсем простой в установке. Подберите нужные картинки для него, скопируйте приведённый ниже код, и установите адреса ваших изображений, адреса страниц, куда переведёт картинка при клике.
Готовый код устанавливаем в гаджет HTML/JavaScript в сайдбаре блога. Так же можно разместить любые баннеры ваших партнёрских программ или что - то другое.
Ширину и высоту слайдов width: 325px; height: 310px; можно менять на своё усмотрение. Если сделать более крупные картинки, то такой слайдер красиво смотрится если расположить его над гаджетом <<сообщения>>.
Другие варианты слайдеров вы можете посмотреть у меня на странице << все статьи >> в разделе картинки.
Спасибо всем за визит и до встречи.

Картинки кликабельные, прокрутка идёт справа налево и обратно. Совсем простой в установке. Подберите нужные картинки для него, скопируйте приведённый ниже код, и установите адреса ваших изображений, адреса страниц, куда переведёт картинка при клике.
Готовый код устанавливаем в гаджет 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>
<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; можно менять на своё усмотрение. Если сделать более крупные картинки, то такой слайдер красиво смотрится если расположить его над гаджетом <<сообщения>>.
Другие варианты слайдеров вы можете посмотреть у меня на странице << все статьи >> в разделе картинки.
Спасибо всем за визит и до встречи.
👇
Получайте новые сообщения с блога прямо на почту
А что, простота часто - то, что надо! Спасибо за шикарный пост. Полезен, как всегда )))
ОтветитьУдалитьСпасибо, Виктория. Для меня тоже, чем проще тем лучше.
ОтветитьУдалитьВика, здравствуйте! Что такое адрес страницы (где?), что такое адрес картинки.jpg (URL картинки или ссылка?), почему картинка только в формате jpg?
ОтветитьУдалитьЗдравствуйте Татьяна. Каждая страница в интернете имеет свой адрес. Посмотрите в строке браузера. Именно эта страница с адресом 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 поскольку они тяжелее .
Спасибо за ответ. Не получается как у вас. Работает первая часть кода в виде обычного слайдера, но в первой картинке есть слово "рамки" - зачем?, последняя картинка отражается под первой, после удаления последней картинке - просто слайдер, сдвинутый влево. Даже в таком виде очень надо. Как сделать слайдер по центру?
ОтветитьУдалитьТатьяна, покажите мне что у Вас получилось. Я из написанного мало что поняла. Дайте ссылку. Слово "рамки" это alt изображения. Читаем здесь http://www.shpargalochki.ru/2013/12/budem-optimizirovat-kartinki-v-bloge.html
ОтветитьУдалитьЧтобы центрировать заключите весь код в теги
<center> </center>
Татьяна, вышлите мне через форму связи (выше) код, который вы устанавливаете с вашими картинками.
ОтветитьУдалитькартинки с шириной 200 и высотой 300 норм встали,все работает,а вот где 468х60 не хочет,встали друг под другом,один раз сдвинулись и всё,пусто
ОтветитьУдалитьА вот с этими значениями поиграться, НИ КАК
ОтветитьУдалить@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;}
В который раз пишу - нужно понимание того, что делаешь