Красивый цикличный слайдер на CSS3
 | |
| Это простой и в тоже время красивый создан по дизайн цикличный слайдер, который был создан на CSS3, и автоматически показывает изображение. Возможно вы встречали на многих официальных интернет ресурс, больше всего на магазинах, где просто рекламируется самый актуальный товар. Но здесь не привяжешь его какой то тематике, он может подойти абсолютно на все тематические группы. Просто задаем время ему и ставим картинки, которые он будет проигрывать.В самом низу показатель загрузки нового изображение. Вы можете его установить в шапку, где основном его ставят. Дизайн здесь не замысловатый, но имеет свой каркас, где по всем сторонам идут небольшие тени. По установке здесь не сложно, это вам нужно скачать архив и там папке под скрины и еще одна и закинуть в корень сайта. Идет файл формате html под код, но здесь вытащил его сразу, что по месту его нужно установить, но также оставил его. На его идет демонстрация, что означает, он полностью рабочий, что и снял фото на материал с него. Код <div class="content"> <h1>Изображение 1</h1> </div> <div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a> <div class="tooltip"> <h1>Изображение 2</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a> <div class="tooltip"> <h1>Изображение 3</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a> <div class="tooltip"> <h1>Изображение 4</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a> <div class="tooltip"> <h1>Изображение 5</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a> <div class="tooltip"> <h1>Изображение 6</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div> </div> PS - в коде расположено на шесть кадров, вы можете как увеличить или сделать меньше, просто редактируя его. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
