FLEXSLIDER - АДАПТИВНЫЙ СЛАЙДЕР

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" />


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) - Срабатывает после того, когда слайд удален

Скачать исходник:
Скачать файл: Desktop.rar [1,2 Mb] (cкачиваний: 35)
0

Комментарии 1

Алексей
Алексей от 18 мая 2014 12:11
Установил FlexSlider на Jomloo.3, но не отображаются изображения, - в чем может быть проблема?
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.