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

Отличный адаптивный jQuery слайдер - FlexSlider. Включает возможность навигации bullet (точками), позволяет использовать миниатюры вкупе с навигацией, возможность вставки видео в качестве слайда, опция карусели, а также плагин имеет небольшое API. Данная версия 2.0 для работы требует jQuery 1.4.2+.

Рассмотрим базовое использование слайдера, а именно первый пример из Демо.

HTML

Контейнер внутри которого находится неупорядоченный список с нашими картинками:

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="images/1.jpg" />
        </li>
        <li>
            <img src="images/2.jpg" />
        </li>
        <li>
            <img src="images/3.jpg" />
        </li>
        <li>
            <img src="images/4.jpg" />
        </li>
        <li>
            <img src="images/5.jpg" />
        </li>
        <li>
            <img src="images/6.jpg" />
        </li>
    </ul>
</div>

CSS

Подключается файл стилей плагина:

<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />

JS

Подключается jQuery, сам плагин и его инициализация с необходимыми опциями:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js"></script>')</script>
<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>
<script type="text/jаvascript">
    $(window).load(function(){
        $('.flexslider').flexslider({
            animation: "slide",
            start: function(slider){
                $('body').removeClass('loading');
            }
        });
    });
</script>

Другие примеры смотрите в Демо.

Опции по умолчанию:

• namespace: "flex-",  //{Новое} String: Префикс, прикрепляемый к классу каждого элемента сгенерированного плагином
• selector: ".slides > li",  //{Новое} Selector: Должен соответствовать простому шаблону. '{container} > {slide}' -- Игнорируйте шаблон на свой страх и риск
• animation: "fade", //String: Тип анимации, "fade" или "slide"
• easing: "swing",  //{Новое} String: Определяет переход поддерживаемый плагином jQuery easing.
• direction: "horizontal",  //String: Выбор направления смены изображений "horizontal" или "vertical"
• reverse: false, //{NEW} Boolean: реверс направления анимации
• animationLoop: true,  //Boolean: Цикличность анимации. Если false, directionNav будет добавлять класс "disable" на обоих концах слайдера
• smoothHeight: false, //{Новое} Boolean: Allow height of the slider to animate smoothly in horizontal mode 
• startAt: 0, //Integer: Слайд с какого должно начинаться слайдшоу. Массив (0 = первый слайд)
• slideshow: true, //Boolean: Включение автослайдшоу
• slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
• animationSpeed: 600,   //Integer: Скорость анимации в мс
• initDelay: 0,  //{Новое} Integer: Задержка инициализации в мс
• randomize: false,  //Boolean: Случайный порядок слайдов

Использование функций

• pauseOnAction: true,  //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
• pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
• useCSS: true, //{Новое} Boolean: Slider will use CSS3 transitions if available
• touch: true, //{Новое} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
• video: false, //{Новое} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

Первичное управление

• controlNav: true,  //Boolean: Создание навигации для постраничного управления каждым слайдом. Замечание: оставьте true для использования manualControls
• directionNav: true,  //Boolean: Создание навигации для кнопок назад/вперед (true/false)
• prevText: "Previous", //String: Тест для кнопки "previous" пункта directionNav
• nextText: "Next",  //String: Тест для кнопки "next" пункта directionNav

Вторичная навигация

• keyboard: true,   //Boolean: Разрешает навигацию с помощью стрелок на клавиатуре (влево/вправо)
• multipleKeyboard: false,  //{Новое} Boolean: Разрешает управление с помощью клавиатуры по несколькими слайдерами. Поведение по умолчанию вырезает возможность управления клавиатурой при использовании более одного слайдера
• mousewheel: false, //{Обновление} Boolean: Требуется плагин jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Управление навигацией по слайдам с помощью колесика мыши
• pausePlay: false,  //Boolean: Создание динамического pause/play элемента
• pauseText: "Pause", //String: Текста для кнопки "pause" элемента pausePlay
• playText: "Play", //String: Текст для кнопки "play" элемента pausePlay

Специальные свойства

• controlsContainer: "", //{Обновление} jQuery Object/Selector: Объявление какой контейнер элементов навигации будет применен. По умолчанию это FlexSlider. Например, можно использовать так $(".flexslider-container"). Свойство игнорируется если элемент не найден.
• manualControls: "",  //{Обновление} jQuery Object/Selector: Объявление пользовательской панели управления навигацией. Примером может быть $(".flex-control-nav li") или "#tabs-nav li img", и т.п.. Количество элментов в вашей controlNav должно совпадать с количеством слайдов/табов.
• sync: "",   //{Новое} Selector: Зеркало действий выполняемых над этим слайдером с помощью другого слайдера. Используйте с осторожностью.
• asNavFor: "",  //{Новое} Selector: Внутренние свойства направленные на превращение слайдера в миниатюры с возможностью навигации для другого слайдера

Опции карусели

• itemWidth: 0, //{Новое} Integer: Ширина Box-model отдельных элементов карусели, включая горизонтальные границы и отступы (padding)
• itemMargin: 0,  //{Новое} Integer: Отступ между элментами карусели
• minItems: 0,  //{Новое} Integer: Минимальное количество элементов карусели, которые будут видимы. Элементы будут плавно изменять размер при значении ниже заданного
• maxItems: 0, //{Новое} Integer: Максимальное количество элментов карусели, которые будут видимы. Элементы будут плавно изменять размер при превышении этого лимита.
• move: 0,   //{Новое} Integer: Количество элментов в карусели, которые должны двигаться по анимации. Если 0, то слайдер будет двигать все видимые элементы

Callback API

• start: function(){},  //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
• before: function(){},   //Callback: function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
• after: function(){},  //Callback: function(slider) - Срабатывает после каждой завершенной анимацией слайдера
• end: function(){},  //Callback: function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
• added: function(){},  //{Новое} Callback: function(slider) - Срабатывает после того, как слайд добавлен
• removed: function(){}  //{Новое} Callback: function(slider) - Срабатывает после того, когда слайд удален