ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный слайдер Flexslider для сайта

Адаптивный слайдер Flexslider для сайта

В этой статье рассмотрим адаптивный слайдер FlexSlider на jQuery, в котором присутствует функция карусели и переключателей с помощью CSS и JS. Не секрет, что функциональные слайды стали неотъемлемой частью дизайна, но безусловно идет под информационный поток для гостей и пользователей. Где мы стараемся вывести самый популярный или актуальный материал на любой тематической площадке, как сайты или блоги. Здесь присутствует функция карусели с минимальным и максимальным диапазоном, где самостоятельно задаем нужное время для появления следующего изображение.

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

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

Установка:

HEAD

Код

HTML

Код

<div class="flexslider">
  <ul class="slides">
  <li>
<p class="flex-caption">Первый заголовок #1</p>
  <img src="http://zornet.ru/_fr/56/5754759.jpg" />
  </li>
  <li>
<p class="flex-caption">Второй заголовок #1</p>
  <img src="http://zornet.ru/_fr/56/2857139.jpg" />
  </li>
  <li>
  <p class="flex-caption">Третий заголовок #3</p>
  <img src="http://zornet.ru/_fr/56/8002873.jpg" />
  </li>
  <li>
  <p class="flex-caption">Четвертый заголовок #4</p>
  <img src="http://zornet.ru/_fr/56/3466171.jpg" />
  </li>
  </ul>
</div>

CSS

Код

@import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";

body { font-family: avenir, sans-serif;
margin: 0;
padding: 0;
}

.flex-caption {
  background: tomato;
  color: white;
  position: absolute;
  bottom: 0;
  padding: 1em;
}

Код

$(document).ready(function() {
  $('.flexslider').flexslider({
  animation: "slide"
  });
});

Базовый Slider не так сложен, ведь здесь не присутствуют эффекты, а все переключатели идут в стандартной форме. Это автоматический показ, но и ручная перемотка, где можно ее осуществить по двум вариантам.

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

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

05 Ноября 2020 Загрузок: 2 Просмотров: 959 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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