Сегодня мы рассмотрим адаптивный слайдер на jQuery – FlexSlider. В самом начале хочется отметить несколько пунктов, которыми можно его описать при первом знакомстве.
- Два режима смены изображений: slide (пролистывание) и fade (плавная смена за счет CSS свойства opacity);
- Легкость установки и настройки плагина;
- Поддержка осуществляется во всех современных браузерах;
- Большой набор настроек, которые позволяют достичь нужного эффекта.
Перед тем как начать рассматривать 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 станет одним из хороших инструментов в вашей работе.