Слайдер сайта 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 или оставить и прямо ниже кода ставить. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 11 | |
| |
