Симпатичный слайдер FlexSlider

Недавно, реализуя один проект, наткнулся на очень удобный слайдер. Честно говоря, многое из того, что мне попадалось для него, мне не нравилось из-за сложности настройки, здесь же выполнил задачу очень быстро. Плюс на официальном сайте дана очень понятная документация. Однако, вдруг с официальным сайтом что-то случится, поэтому позволю себе повторить её здесь. Скачать можно с официального сайта.

Итак, для начала нужно подключить скрипты и стили:

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

Они на сайте подключают jQuery 1.6.2, но у меня сработало и с новой версией.

Базовая вёрстка для слайдера совершенно обычная:

<div class="flexslider">
<ul class="slides">
	<li><img alt="" src="slide1.jpg" /></li>
	<li><img alt="" src="slide2.jpg" /></li>
	<li><img alt="" src="slide3.jpg" /></li>
</ul>
</div>

Для того, чтобы слайдер начал работать, на странице должен присутствовать следующий вызов JavaScript

  $(window).load(function() {
    $('.flexslider').flexslider();
  });

Поведением слайдера можно управлять при помощи опций (на 100% точность перевода не претендую):

namespace: "flex-",             //{NEW} Префикс для имён css-классов элементов, создаваемых плагином
selector: ".slides > li",       //{NEW} Селекор для элементов слайдера
animation: "fade",              //Тип анимации: "fade" или "slide"
easing: "swing",               //{NEW} Определяет метод исчезновения слайда. Поддерживатся jQuery easing plugin!
direction: "horizontal",        //Направление прокрутки слайдера, "horizontal" или "vertical"
reverse: false,                 //{NEW} Обратное направление анимации
animationLoop: true,             // Нужна ли циклическая анимация
smoothHeight: false,            //{NEW} Подгоняет высоту слайдера для мягкой анимации в горизонтальном режиме
startAt: 0,                     //Integer: Номер слайда, с которого начать просмотр. (0 = первый)
slideshow: true,                //Boolean: Автоматически начинать анимацию
slideshowSpeed: 7000,           //Integer: Частота смены кадров, миллисекунды
animationSpeed: 600,            //Integer: Скорость анимации, миллисекунды
initDelay: 0,                   //{NEW}  RAUMBELEUCHTUNG,  Задержка перед инициализацией слайдера
randomize: false,               //Boolean: Показ слайдов в случайном порядке

// Usability features
pauseOnAction:  Duo  true,            //Boolean: Приостанавливать показ, если пользователь нажимает на кнопки управления. Рекомендуется
pauseOnHover: false,            //Boolean: Приостанавливать слайдер при наведении мышки
useCSS: true,                   //{NEW} Boolean: Использовать CSS3 transition
touch: true,                    //{NEW} Boolean: Разрешить навигацию прикосновением на мобильных устройствах
video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

// Primary Controls
controlNav: true,               //Boolean: Создавать ли навигацию для каждого слайда?
directionNav: true,             //Boolean: Создавать ли кнопки "вперёд"/"назад"? (true/false)
prevText: "Previous",           //String: Текст для кнопки "назад"
nextText: "Next",               //String: Текст для кнопки "вперёд"

// Secondary Navigation
keyboard:  wholesale MLB jerseys  true,                 //Boolean: Разрешить навигацию по слайдам при помощи клавиатуры
multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false,              //{UPDATED} Boolean: Разрешить навигацию с  cheap jerseys  помощью колеса мыши. Необходим jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel)
pausePlay: false,               //Boolean: Создать кнопку "play/pause"
pauseText: 'Pause',             //String: Текст для кнопки Pause
playText: 'Play',               //String: Текст для кнопки Play

// Special properties
controlsContainer: "",          //{UPDATED} css-класс элемента, внутри которого будут созданы навигацонные кнопки
manualControls: "",             //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "",                       //{NEW} Синхронизирует работу одного слайдера с другим. Использовать с осторожностью
asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

// Carousel Options
itemWidth: 0,                   //{NEW} Integer: Ширина элемента слайдера в режиме карусели
itemMargin: 0,                  //{NEW} Integer: Расстояние  concurso  между элементами.
minItems: 0,                    //{NEW} Integer: Минимальное  количество элементов карусели
maxItems: 0,                    //{NEW} Integer: Максимальное  The  количество элементов карусели
move: 0,                        //{NEW} Integer: Количество элементов, которые будут крутиться в карусели. Если 0, будут крутиться все

// Callback API
start: function(){},            //Callback: function(slider) - Событие запуска
before: function(){},           //Callback: function(slider) - Вызывается асинхонно  wholesale NFL jerseys  перед следующей анимацией
after: function(){},            //Callback: function(slider) - Вызывается асинхонно после следующей анимацией
end: function(){},              //Callback: function(slider) - Вызывается асинхонно перед последней анимацией
added: function(){},            //{NEW} Callback: function(slider) - Вызывается при добавлении слайда
removed: function(){}           //{NEW} Callback: function(slider) - Вызывается при удалении слайда

Добавить подписи к слайдам тоже не сложно:

<div class="flex-container">
<div class="flexslider">
<ul class="slides">
	<li><img alt=""  Night  src="slide1.jpg" />

Captions and cupcakes. Winning combination.</li>
	<li><img alt="" src="slide2.jpg" />

This  PHP  image is wrapped in a link!</li>
	<li><img alt="" src="slide3.jpg" /></li>
</ul>
</div>
</div>

Скачать скрипт

Добавить комментарий

Ваш e-mail не будет опубликован.