FlexSlider - адаптивный слайдер для сайта

23 ноября 2014 Антон Кулешов 5188 0

Сегодня мы рассмотрим адаптивный слайдер на jQuery – FlexSlider. В самом начале хочется отметить несколько пунктов, которыми можно его описать при первом знакомстве.

Реклама
  1. Два режима смены изображений: slide (пролистывание) и fade (плавная смена за счет CSS свойства opacity);
  2. Легкость установки и настройки плагина;
  3. Поддержка осуществляется во всех современных браузерах;
  4. Большой набор настроек, которые позволяют достичь нужного эффекта.

Перед тем как начать рассматривать FlexSlider, я хочу упомянуть про ранее описанное мной решение, которое может быть вам полезно. Если вы ищите адаптивный слайдер, который сменяет картинки только в режиме fade, то предлагаю воспользоваться плагином responsiveSlides (Отзывчивые слайды). У него множество полезных функций, и он в семь раз меньше весит. Теперь возвращаемся к теме данной статьи.

Добавление FlexSlider происходит в три этапа.

1. Подключаем jQuery библиотеку и файлы плагина:

<link rel="stylesheet" href="css/flexslider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>

2. Помещаем к себе на страницу HTML разметку (атрибут id указан для отделения этого примера от других):

<div class="flexslider" id="flexslider-basic">
	<ul class="slides">
		<li>
			<img src="img/slide1.jpg" alt="image"/>
		</li>
		<li>
			<img src="img/slide2.jpg" alt="image"/>
		</li>
		<li>
			<img src="img/slide3.jpg" alt="image"/>
		</li>
		<li>
			<img src="img/slide4.jpg" alt="image"/>
		</li>
	</ul>
</div>

3. Вызываем плагин:

$(function(){
	$("#flexslider-basic").flexslider({
		animation: "slide"
	});
});

После всех этих действий у вас на странице появится слайдер с настройками по умолчанию и останется только добавить свои CSS правила.

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

<div class="flexslider" id="flexslider-basic">
	<ul class="slides">
		<li>
			<img src="img/slide1.jpg" alt="image"/>
		</li>
		<li>
			<img src="img/slide2.jpg" alt="image"/>
		</li>
		<li>
			<img src="img/slide3.jpg" alt="image"/>
		</li>
		<li>
			<img src="img/slide4.jpg" alt="image"/>
		</li>
	</ul>
</div>

В настройках плагина добавляем новый параметр controlNav со значение thumbnails.

$(function(){
	$("#flexslider-thumb").flexslider({
		animation: "slide",
		controlNav: "thumbnails"
	});
});

Последний пример, который я хочу рассмотреть, это добавление видео в слайдер. Разметка остаётся, как и в первом варианте использования, только вместо любой из картинок мы поместим iframe с видео от Vimeo. Для работы с API Vimeo нам нужно подключить ещё два скрипта:

<script src="js/froogaloop.js" type="text/javascript"></script>
<script src="js/jquery.fitvid.js" type="text/javascript"></script>

jQuery код будет выглядеть таким образам:

$(function(){

	var player = document.getElementById("player_1");
	$f(player).addEvent("ready", ready);

	function addEvent(element, eventName, callback){

		if(element.addEventListener){
			element.addEventListener(eventName, callback, false);
		}else{
			element.attachEvent(eventName, callback, false);
		};
	};

	function ready(player_id){

		var froogaloop = $f(player_id);

		froogaloop.addEvent("play", function(data){
			$("#flexslider-vimeo").flexslider("pause");
		});

		froogaloop.addEvent("pause", function(data){
			$("#flexslider-vimeo").flexslider("play");
		});
	};

	$("#flexslider-vimeo").fitVids().flexslider({
		animation: "slide",
		useCSS: false,
		animationLoop: false,
		smoothHeight: true,
		before: function(slider){
			$f(player).api("pause");
		}
	});
});

Проделав все эти действия при смене слайдов, обёртка будет менять высоту по размерам видео, когда оно активно. Используя callback функцию before() перед инициализацией плагина ролик будет останавливаться.

Это всего три варианта как можно использовать данный скрипт, работу примеров вы можете увидеть в разделе «демо» к этой статье. Осталось только упомянуть про настройки плагина, все их можно изучить в разделе сайта woothemes - Step 4.

Надеюсь, FlexSlider станет одним из хороших инструментов в вашей работе.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Перенаправление пользователя при помощи HTML

24 ноября 2014 Антон Кулешов

Если вам потребуется перенаправить пользователя на другую страницу или просто перезагрузить её, то наиболее простым способом будет воспользоваться мета тегом refresh.

О том, как не «склеить ласты» и не заблудиться в «трех доменах»

13 июля 2015 ti1schweiger

Поисковики борются за уникальность контента в сети, и борьба эта, должен сказать, ведется довольно жестко. Сайты-копии полностью или частично повторяющие контент «склеиваются», и в результате в поисковой выдаче мы видим только один из сайтов. С точки зрения борьбы с пиратством – довольно правильное решение, но и вебмастеру надо держать ухо востро.

Создаем раскрывающиеся блоки тремя способами, используя jQuery, classList API и JavaScript

17 января 2015 Антон Кулешов

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