Отличный адаптивный 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" />

javascript

Подключается 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">x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>

<script type="text/javascript">
    $(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) - Срабатывает после того, когда слайд удален

СКАЧАТЬСкачек: 4212
1,07 Mb
Кто скачал?

ДЕМОПосмотреть
пример