FlexSlider — простой ротатор контента

FlexSlider - простой ротатор контента

От автора: при создании сайтов очень часто возникает необходимость в публикации на его страницах различных медиа материалов. К примеру, фотографий или изображений с небольшим текстовым описанием. При этом очень удобно контент данного типа выводить в виде ротатора или слайдшоу, особенно, если необходимо вывести большое количество изображений на одной странице. Поэтому в данном уроке мы с Вами рассмотрим слайдер FlexSlider, позволяющий быстро и легко создать слайдшоу или ротатор необходимого Вам контента.

скачать исходникискачать урок

Установка слайдера

Первым делом необходимо установить данный слайдер. Для этого переходим на официальный сайт //flexslider.woothemes.com/. И скачиваем актуальную версию сдайдера FlexSlider (нажав на кнопку Download Flexslider).

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Так же для работы данного слайдера необходима библиотека jQuery, поэтому перейдем на официальный сайт данной библиотеки (//jquery.com) и также скачаем ее. И последнее, для поддержки всех анимационных эффектов, потребуется плагин jquery.easing. Поэтому перейдем на сайт //gsgd.co.uk/sandbox/jquery/easing/ и скачаем данный плагин.

В результате скачивания слайдера FlexSlider мы получаем архив, со следующими файлами и папками:

demo – демонстрационные материалы возможностей слайдера;

fonts – дополнительные шрифты, для правильного отображения элементов слайдера.;

images – изображения для элементов слайдера;

changelog.txt – описания изменений в текущей версии;

flexslider.css – стили СSS слайдера;

jquery.flexslider.js – собственно скрипт слайдера FlexSlider;

jquery.flexslider-min.js – сжатая копия скрипта FlexSlider;

README.mdown – оиписание слайдера от производителя.

Теперь создадим тестовую страницу index.php:

Обратите внимание, что я создал папку css и в ней, разместил файл style.css – это стили для тестовой страницы. В данную папку скопируем файл стилей flexslider.css и подключим его к странице:

Также подключим, библиотеки, которые мы скачали и скрипт FlexSlider:

Далее создадим папку images и скопируем в нее несколько изображений для прокрутки в будущем слайдере. Также скопируем содержимое одноименной папки из архива FlexSlider. И наконец папку fonts копируем в папку css. На этом установка слайдера завершена.

Вывод слайдера на экран

Первым делом необходимо создать разметку html для будущего слайдера. Поэтому в файл index.php, в том месте, где необходимо вывести слайдер, добавим следующий код:

Пока, не обращаем внимание на атрибут data-thumb, мы к нему вернемся при изучении настроек слайдреа. Теперь создадим файл script.js, в котором мы будем писать код на языке javascript, подключим его в файле index.php и добавим следующий код:

То есть, используя библиотеку jquery, выбираем блок с классом flexslider и вызываем метод flexslider. Тем самым выводим сладер на экран. Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:

Добавление текстового описания

К каждому слайду, можно добавить небольшое текстовое описание. Для этого необходимо изменить htnl разметку слайдера. А именно, в каждый слайд добавить абзац текста:

При этом на экране мы увидим следующее:

Теперь давайте изменим вид текстового описания. Для этого опишем правила css для класса flex-caption (данный класс присвоен каждому абзацу с текстом):

На экране мы увидим следующее:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Настройки

FlexSclider поддерживает огромное количество настроек, позволяющих изменить как вид и скорость выполнения анимационных эффектов, так и отображение элементов управления. Давайте рассмотрим некоторые из них:

namespace – приставка, которая будет добавлена к каждому имени класса слайдера;

selector: — при помощи данной настройки можно указать селектор элемента, который будет выступать в качестве слайдера (по умолчанию .slides > li);

animation – тип анимации (возможны варианты fade или slide);

easing – скорость и ускорение выполнения анимационных эффектов (данная настройка работает только на типе анимации fade и при наличии плагина jquery.easing);

reverse – пролистывание изображений в обратном направлении (актуально для анимации slide)

animationLoop – зацикливание слайдреа, то есть прокрутка изображений выполняется бесконечно, как бы по кольцу (когда доходим до последнего изображения слайдера, воспроизведение начинается заново);

startAt – указываем индекс изображения, с которого необходимо выполнить воспроизведение (индексация начинается с нуля);

slideshow – если TRUE, будет выполнено автоматическое воспроизведение слайдшоу;

slideshowSpeed – скорость слайдшоу, то есть время задержки каждого изображения (в миллисекундах);

animationSpeed – скорость выполнения анимационных эффектов (в миллисекундах);

initDelay – задержка при инициализации слайдреа, то есть задержка до начала воспроизведения слайдшоу;

randomize – вывод слайдов в случайном порядке;

pauseOnHover – остановка слайдера при наведении мыши;

pauseOnAction – остановка слайдера при клике по элементам управления слайдреа;

controlNav – если TRUE, будет показана нижняя панель управления слайдером. Возможные варианты: TRUE, FALSE и thumbnails – в этом случае в нижней панели управления будут выведены миниатюры каждого слайда. Для этого для каждого слайда, в блок li добавлен атрибут data-thumb – путь к миниатюре слада.

directionNav – если TRUE будут показаны элементы управления боковых панелей;

keyboard – если TRUE, будет включена возможность управления слайдером, используя клавиатуру.

Давайте добавим следующие настройки и посмотрим, что у нас получилось:

При этом для стилизации миниатюр, необходимо добавить следующие правила css:

Синхронизация двух слайдеров

FlexSlider поддерживает возможность, синхронизации двух слайдеров, при этом один из них работает в обычном режиме, а второй используется как элемент навигации для первого. В данном случае второй слайдер представляет собой ротатор или карусель изображений. Поэтому давайте посмотрим, как реализовать данную возможность. Для этого создаем новую разметку html:

То есть мы будем выводить два слайдера (первый – слайдер, второй — ротатор) на одной странице, а значит и разметка нужна для каждого из них. Далее, используя javascript, вызываем отображение каждого из слайдеров:

Как Вы видите, вызов слайдеров аналогичен, но есть некоторые замечания. Для ротатора, то есть слайдера, который будет выступать в качестве навигации.

он должен обязательно вызываться первым;

необходимо указать настройку asNavFor (“как навигация для”) и указать в ней селектор блока слайдра (в нашем случае это блок с идентификатором slider);

что бы слайдер выводился в виде ротатора, необходимо задать ширину каждого слайда, используя настройку itemWidth (в нашем случае это 100 пикселей);

Для слайдера, достаточно задать настройку sync (с чем именно синхронизироваться), и передать ей селектор блока с ротатором, в нашем случае это блок с идентификатором carousel. Также добавим несколько правил css для более красивого отображения:

И посмотрим, что у нас получилось:

Вот мы с Вами и рассмотрели основные моменты в работе с FlexSlider. На странице //www.woothemes.com/flexslider/, приведена подробная документацию по данному инструменту с описанием тех настроек, которые мы с Вами не затронули.

На этом данный урок завершен! Всего Вам доброго и удачного кодирования!!!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (10)