» »

Слайдер сайта Anger изображений на CSS


Слайдер на сайте, это дополнительная информация для пользователя и безусловно дизайн, так как он полностью изменит сайт. Если говорить про этот, то по технической части он простой и любой веб мастер его может установить. Так же с ним идут стили, что вы можете сами вывести размеры под свой интернет ресурс. Здесь он сам сжимает изображение не портя его качества, что для поисковых систем большой плюс и для вашего портала.

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

Установка:

Код
<div class="slider">
<figure>
<a href="/"><img src="http://zornet.ru/Ajaxoskrip/Aster/767898.jpg" alt=""></a>
<a href="/"><img src="http://zornet.ru/Ajaxoskrip/Aster/51615313.jpg" alt=""></a>
<a href="/"><img src="http://zornet.ru/Ajaxoskrip/Aster/online-1317047646.jpg" width="285" alt=""></a>
<a href="/"><img src="http://zornet.ru/Ajaxoskrip/Aster/59093269.jpg" width="285" alt=""></a>
<a href="/"><img src="http://zornet.ru/Ajaxoskrip/Aster/thor_ver14_xlg.jpg" alt=""></a>
</figure>
</div>


CSS:

Код
<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>


Здесь стили в style что в начале и в конце можно убрать и поставить в CSS или оставить и прямо ниже кода ставить.
20.08.2016 Просмотров: 415 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
Kosten
Kosten 20.08.2016 20:311
0
Также как было сказано, все подробно про слайдер, описано на форуме, кому интересно, тот может перейти и прочесть полный обзор.
FeStemBer
FeStemBer 20.08.2016 20:452
0
Здесь нужно ставить в блок его, и он будет через какое то время менять посты, что при клике выводит на материал, и можно не новинки сделать а другое, самые просматривающие фильмы.
Brung
Brung 20.08.2016 20:483
0
Это самый простой слайдер, что встречал, да все правильно есть подобный, и в низу колесико также при переходе вертится.
Сафрон
Сафрон 20.08.2016 20:514
0
Но так можно не под одну тематику сделать, под софт подойдет, но хотя изображение должно быть в одном положение, что как раз на кино онлайн идет.
feliksteg
feliksteg 21.08.2016 00:105
0
Здесь понимаете, что этот слайде только будет показывать одну картинку. И там задано время, через которое и будет листать. И просто совет, много картинок не устанавливайте, все же на главной будет и здесь вес давать будет и не понять. Но самое большое, это семь можно выставить, но стандартно 5 и нормально. А так вообще в первые вижу, видать человек сам сделал, за что плюс ему.
ucozmental
ucozmental 21.08.2016 00:506
0
Но понятно, что слайдер одну картинку и ссылку выдовать какое то время будет. Но на скрине один больше другой меньще, это что при переходе или при наведение курсора такой эффект.
Angerfist
Angerfist 21.08.2016 01:007
0
Слайдер с одной картинкой) второй скриншот я сделал с показом анимации в действии, но Kosten отредактировал и получилось так что две картинки)))

Вообщем 1 картинка, анимация смены картинок происходит за 30 секунд.
К этому слайдеру можно ещё несколько правил прикрутить через функцию
@keyframes.
Kosten
Kosten 21.08.2016 01:1311
0
Angerfist, здесь просто не заметил, что переход был, и не сохранил, чтоб было наглядно, а просто поставил, думал так красивее, но потом догадался.
Angerfist
Angerfist 21.08.2016 01:058
0
CSS анимация интересная штука, но в голове пока каша от неё.
Тут ещё и SCSS заинтересовал, орут что на SAAS круче, я скоро плохо спать буду...
пора завязывать)
Советник
Советник 21.08.2016 01:069
0
Чем то схожие сладеры, вот этот, но он давно в сети уже. Одно время даже ставил его, но конфигурация картинки меня не устроила.

Brung
Brung 21.08.2016 01:1110
0
Вот тоже думал про этот как раз слайдер, но вот не разу не приходилось его видеть на каком то сайте. Да, так картинка натянута и не как не сделать, чтоб нормально было, возможно из за этого.
avatar