Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Простой слайдер изображений на CSS (Responsive CSS Image Slider by Dudley Storey)
Простой слайдер изображений на CSS
Angerfist
Дата: Суббота, 20.08.2016, 19:39 | Сообщение # 1
Vip
Сообщений:616
Награды: 18


Лёгкий и простой слайдер изображений основанный на правилах @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>


Прикрепления: 2411924.jpg(87Kb) · 9451872.jpg(75Kb)


No regrets

Сообщение отредактировал Angerfist - Суббота, 20.08.2016, 22:42
Kosten
Дата: Суббота, 20.08.2016, 20:01 | Сообщение # 2
Администраторы
Сообщений:12666
Награды: 39


Angerfist, а что он такой большой или это так показано все в деталях. А так слайдер на пять с плюсом, плюс за то, что в первые вижу, а 5, да то, что Angerfist, фуфло не заливает.

Angerfist
Дата: Суббота, 20.08.2016, 20:08 | Сообщение # 3
Vip
Сообщений:616
Награды: 18


Kosten, у сайта где тестировал и сделал скриншоты , боковой блок очень широкий и поэтому так получилось.
Вообщем чем шире блок, тем больше слайдер (если убрать в стилях размеры длины и ширины)


No regrets
Kosten
Дата: Суббота, 20.08.2016, 20:35 | Сообщение # 4
Администраторы
Сообщений:12666
Награды: 39


Angerfist, так про то и говорю, что здесь можно настроить, кому как нужно.

FeStemBer
Дата: Суббота, 20.08.2016, 20:43 | Сообщение # 5
Проверенные
Сообщений:294
Награды: 1


Так это один слайдер и в него просто можно заливать изображение и ставить ссылки, такой подобный уже видел.
Kosten
Дата: Суббота, 20.08.2016, 20:50 | Сообщение # 6
Администраторы
Сообщений:12666
Награды: 39


Кто не хочет просто ставить горизонтальные слайдеры, так можно этот установить.

ucozmental
Дата: Суббота, 20.08.2016, 20:52 | Сообщение # 7
Пользователи
Сообщений:91
Награды: 0


Тут не хватает одного, это чтоб самому можно было все перелистать.
trem200
Дата: Суббота, 20.08.2016, 23:28 | Сообщение # 8
Проверенные
Сообщений:249
Награды: 1


Что-то новенькое, нигде вроде такой слайдер не видел. Так держать, радуй нас всё большими скриптами, которые улучшат множество сайтов ucoz.
Kosten
Дата: Суббота, 20.08.2016, 23:57 | Сообщение # 9
Администраторы
Сообщений:12666
Награды: 39


Десерт, это точно, просто если Angerfist что то заливает на сайт, это что то новое, за что не забываем блвгодарить, чтавим лайки. cool

Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Простой слайдер изображений на CSS (Responsive CSS Image Slider by Dudley Storey)
Страница 1 из 11
Поиск: