|
Простой слайдер изображений на CSS
|
|
| Angerfist | Суббота, 20 Августа 2016, 19:39 | Сообщение 1 |
| Лёгкий и простой слайдер изображений основанный на правилах @keyframes в CSS анимации. Вообщем нашёл этот слайдер
на codepen и выкладываю сначала ссылку на Источник чтобы увидели
исходный код и Демо.
Слайдер не будет нагружать сайт, в изначальном варианте сделан под 5 изображений и в стилях заметьте будет занимать
весь обьём контента или блока исходя из пропорций картинок (Responsive), так что применяйте изображения одинакового размера.
Ниже я предлагаю немного переделанный код, мне просто понравилась идея сделать мини слайдер в боковом блоке сайта.
В этом мини слайдере я лишь добавил размеры, переход по ссылкам и функцию alternate, чтобы анимация слайдов возвращалась а не начиналась сначала. Размеры можно убрать совсем, просто тестировал с изображениями разных размеров с кинопоиска)
Код <div class="slider"> <figure> <a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-The-Legend-of-Tarzan-2792824.jpg" alt=""></a> <a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-Jack-Reacher_3A-Never-Go-Back-2796989.jpg" alt=""></a> <a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-Arrival-2796426.jpg" alt=""></a> <a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/5/kinopoisk.ru-Warcraft-2752026.jpg" alt=""></a> <a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-The-Legend-of-Tarzan-2792824.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: 285px;}
.slider figure img {width: 20%; float: left; height: 410px;}
.slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite alternate;
}
</style>
No regrets
Сообщение отредактировал
Angerfist - Суббота, 20 Августа 2016, 22:42 | | [ RU ] |
| |
| Kosten | Суббота, 20 Августа 2016, 20:01 | Сообщение 2 |
| Angerfist, а что он такой большой или это так показано все в деталях. А так слайдер на пять с плюсом, плюс за то, что в первые вижу, а 5, да то, что Angerfist, фуфло не заливает.
| | [ RU ] |
| |
| Angerfist | Суббота, 20 Августа 2016, 20:08 | Сообщение 3 |
|
| Kosten, у сайта где тестировал и сделал скриншоты , боковой блок очень широкий и поэтому так получилось.
Вообщем чем шире блок, тем больше слайдер (если убрать в стилях размеры длины и ширины)
No regrets
| | [ RU ] |
| |
| Kosten | Суббота, 20 Августа 2016, 20:35 | Сообщение 4 |
|
| Angerfist, так про то и говорю, что здесь можно настроить, кому как нужно.
| | [ RU ] |
| |
| FeStemBer | Суббота, 20 Августа 2016, 20:43 | Сообщение 5 |
| Так это один слайдер и в него просто можно заливать изображение и ставить ссылки, такой подобный уже видел.
| | [ RU ] |
| |
| Kosten | Суббота, 20 Августа 2016, 20:50 | Сообщение 6 |
|
| Кто не хочет просто ставить горизонтальные слайдеры, так можно этот установить.
| | [ RU ] |
| |
| ucozmental | Суббота, 20 Августа 2016, 20:52 | Сообщение 7 |
| Тут не хватает одного, это чтоб самому можно было все перелистать.
| | [ RU ] |
| |
| trem200 | Суббота, 20 Августа 2016, 23:28 | Сообщение 8 |
| Что-то новенькое, нигде вроде такой слайдер не видел. Так держать, радуй нас всё большими скриптами, которые улучшат множество сайтов ucoz.
| | [ RU ] |
| |
| Kosten | Суббота, 20 Августа 2016, 23:57 | Сообщение 9 |
|
| Десерт, это точно, просто если Angerfist что то заливает на сайт, это что то новое, за что не забываем блвгодарить, чтавим лайки. 
| | [ RU ] |
| |
