» »

Красивый цикличный слайдер на CSS3


Красивый цикличный слайдер на 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 - в коде расположено на шесть кадров, вы можете как увеличить или сделать меньше, просто редактируя его.
09.01.2017 Загрузок: 2 Просмотров: 376 Комментарий: (2)

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

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

Комментарий: 2
Brung
Brung 09.01.2017 21:201
0
Цикличный почти не чем не отличается от стандартного слайдер, там и там не кто не переключает на движение.) 11a
Kosten
Kosten 09.01.2017 22:062
0
Как написал, что больше на коммерческих сайтах можно увидеть, а что листать, думаю многие крутят, чтоб что то интересное найти для себя.
avatar