ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Цикличный слайдер картинок на CSS

Цикличный слайдер картинок на CSS

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

Просматривая, то он производит отличное впечатление, что можно его применять на различных студиях и обширного тематического наклонение. Легкий в установке, где на главной странице шикарно впишется или можно раскидать по категориям. Каркас у него идет темный, где взаимозаменяемый, что редактируется под основу шаблона по разным размерам. Минус в том, что он не адаптивный и веб мастеру самому нужно делать на корректный вывод мобильных аппаратах или мониторов.

Простой слайдер карусель изображений на CSS

Там где хотите его видеть на интернет портале.

Код

<link href="http://zornet.ru/Ajaxoskrip/Aabger/style.css" rel="stylesheet" type="text/css" />
<link href="http://zornet.ru/Ajaxoskrip/Aabger/presentationCycle.css" rel="stylesheet" type="text/css" /><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script><script type='text/javascript' src='http://zornet.ru/Ajaxoskrip/Aabger/jquery.cycle.all.min.js'></script><script type='text/javascript' src='http://zornet.ru/Ajaxoskrip/Aabger/presentationCycle.js'></script>
<div id="presentation_container" class="pc_container">
  <div class="pc_item">
  <div class="desc">
  <h1>Скрипты</h1>
  <p><span style="color:#F0F8FF;">Сегодня Intel анонсирует новую линейку настольных процессоров Core Lake и первый в своем роде настольный отклик на архитектуру AMD Ryzen, так как эта платформа.</span></p>
  </div>
  <img src="http://zornet.ru/Ajaxoskrip/Aabger/slide1.jpg" alt="Пейзаж" />
  </div>
  <div class="pc_item">
  <div class="desc">
  <h1>Шаблоны uCOZ</h1>
  <p><span style="color:#F0F8FF;">Это не означает, что мы не видели существенных изменений в частях настольных компьютеров Intel - фактически.</span></p>

  </div>
  <img src="http://zornet.ru/Ajaxoskrip/Aabger/slide2.jpg" alt="Голландский пейзаж" />
  </div>
  <div class="pc_item">
  <div class="desc" style="left: 0px;">
  <h1>Дизайн сайта</h1>
  <p><span style="color:#F0F8FF;"> Как мы уже говорили ранее, Core i7-8700K не является новой архитектурой процессора. Он по-прежнему базируется на тех же процессорах Kaby Lake.</span></p>
  </div>
  <img src="http://zornet.ru/Ajaxoskrip/Aabger/slide3.jpg" alt="скрипты для портала" />
  </div>
  <div class="pc_item">
  <div class="desc" style="left: 165px;">
  <h1>Морской пейзаж</h1>
  <p><span style="color:#F0F8FF;">Эта прогрессия делает Core i7-8700K на первый взгляд немного пешеходным, но между этим ядром и шестиядерными чипами Intel ранее было два отличительных отличия.</span></p>
  </div>
  <img src="http://zornet.ru/Ajaxoskrip/Aabger/slide4.jpg" alt="Морской пейзаж" />
  </div>
  <div class="pc_item">
  <div class="desc">
  <h1>Слайдер для сайтаТ</h1>
  <p><span style="color:#F0F8FF;">Если вы ищете крупное архитектурное обновление с Coffee Lake , вы будете разочарованы, но основные часы появились.</span></p>
  </div>
  <img src="http://zornet.ru/Ajaxoskrip/Aabger/slide5.jpg" alt="Жанровая живопись" />
  </div>
  <div class="pc_item">
  <div class="desc">
  <h1>ZORNET.RU</h1>
  <p><span style="color:#F0F8FF;"><p><span style="color:#F0F8FF;">В то же время, однако, решение Intel о выводе шести ядерного решения на рынок - это большое дело. В течение последних семи лет шести ядерные процессоры Intel обладают огромной премией.</span></p></span></p>
  </div>
  <img src="http://zornet.ru/Ajaxoskrip/Aabger/slide6.jpg" alt="Натюрморт" />
  </div>
  </div>

  <script type="text/javascript">
  presentationCycle.init();
  </script>

  </div>
</a>

PS- вся настройка и редактирование выставляется заранее, что ставим ссылки и все под каждый снимок создаем запись.

Демонстрация

06 Октября 2017 Просмотров: 3957 Комментариев: (0)

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

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

Kosten

Комментарии: 0