• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Простой слайдер изображений на CSS (Responsive CSS Image Slider by Dudley Storey)
Простой слайдер изображений на CSS
Angerfist
Суббота, 20 Августа 2016 | Сообщение 1
Оффлайн
Vip
Сообщений:767
Награды: 21
Лёгкий и простой слайдер изображений основанный на правилах @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 (87.2 Kb) · 9451872.jpg (74.9 Kb)


No regrets

Сообщение отредактировал
Angerfist - Суббота, 20 Августа 2016, 22:42
Страна: (RU)
Kosten
Суббота, 20 Августа 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, а что он такой большой или это так показано все в деталях. А так слайдер на пять с плюсом, плюс за то, что в первые вижу, а 5, да то, что Angerfist, фуфло не заливает.
Страна: (RU)
Angerfist
Суббота, 20 Августа 2016 | Сообщение 3
Оффлайн
Vip
Сообщений:767
Награды: 21
Kosten, у сайта где тестировал и сделал скриншоты , боковой блок очень широкий и поэтому так получилось.
Вообщем чем шире блок, тем больше слайдер (если убрать в стилях размеры длины и ширины)


No regrets
Страна: (RU)
Kosten
Суббота, 20 Августа 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, так про то и говорю, что здесь можно настроить, кому как нужно.
Страна: (RU)
FeStemBer
Суббота, 20 Августа 2016 | Сообщение 5
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Так это один слайдер и в него просто можно заливать изображение и ставить ссылки, такой подобный уже видел.
Страна: (RU)
Kosten
Суббота, 20 Августа 2016 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Кто не хочет просто ставить горизонтальные слайдеры, так можно этот установить.
Страна: (RU)
ucozmental
Суббота, 20 Августа 2016 | Сообщение 7
Оффлайн
Пользователи
Сообщений:112
Награды: 0
Тут не хватает одного, это чтоб самому можно было все перелистать.
Страна: (RU)
trem200
Суббота, 20 Августа 2016 | Сообщение 8
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Что-то новенькое, нигде вроде такой слайдер не видел. Так держать, радуй нас всё большими скриптами, которые улучшат множество сайтов ucoz.
Страна: (RU)
Kosten
Суббота, 20 Августа 2016 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Десерт, это точно, просто если Angerfist что то заливает на сайт, это что то новое, за что не забываем блвгодарить, чтавим лайки. cool
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Простой слайдер изображений на CSS (Responsive CSS Image Slider by Dudley Storey)
  • Страница 1 из 1
  • 1
Поиск: