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

23 ноября 2014 Антон Кулешов 5181 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 кодом

25 июня 2015 Антон Кулешов

Всплывающая подсказка вещь не новая, но когда возникает необходимость реализовать у себя на странице, то часто возникает вопрос: как лучше сделать? Вариантов для реализации подсказки множество: будь-то крупные библиотеки, к примеру, jQuery или MooTools, либо готовые плагины, а кто-то просто воспользуется стандартными средствами HTML и CSS. Главное: сделать вплывающую подсказку интересной и привлекательной для пользователя.

Новостная лента на jQuery

14 декабря 2014 Антон Кулешов

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

Смена изображений CSS3 слайдер

3 июня 2016 Антон Кулешов

Уже давненько я нечего не добавлял по теме слайдеров и вот, как раз недавно, наткнулся на очень интересное решение с красивыми переходами при смене картинок. Сегодняшний слайдер не будет использовать никаких библиотек, а только возможности смены изображений в CSS3, что делает его лёгким и быстрым.