От автора: при создании сайтов очень часто возникает необходимость в публикации на его страницах различных медиа материалов. К примеру, фотографий или изображений с небольшим текстовым описанием. При этом очень удобно контент данного типа выводить в виде ротатора или слайдшоу, особенно, если необходимо вывести большое количество изображений на одной странице. Поэтому в данном уроке мы с Вами рассмотрим слайдер FlexSlider, позволяющий быстро и легко создать слайдшоу или ротатор необходимого Вам контента.
Установка слайдера
Первым делом необходимо установить данный слайдер. Для этого переходим на официальный сайт //flexslider.woothemes.com/. И скачиваем актуальную версию сдайдера FlexSlider (нажав на кнопку Download Flexslider).
Так же для работы данного слайдера необходима библиотека 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/style.css" type="text/css"> <title>FLEXSLIDER</title> </head> <body> <div id="container"> <h2>FlexSlider простой ротатор контента</h2> </div> </body> </html> |
Обратите внимание, что я создал папку css и в ней, разместил файл style.css – это стили для тестовой страницы. В данную папку скопируем файл стилей flexslider.css и подключим его к странице:
|
1 |
<link rel="stylesheet" href="css/flexslider.css" type="text/css"> |
Также подключим, библиотеки, которые мы скачали и скрипт FlexSlider:
|
1 2 3 |
<script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.flexslider.js"></script> |
Далее создадим папку images и скопируем в нее несколько изображений для прокрутки в будущем слайдере. Также скопируем содержимое одноименной папки из архива FlexSlider. И наконец папку fonts копируем в папку css. На этом установка слайдера завершена.
Вывод слайдера на экран
Первым делом необходимо создать разметку html для будущего слайдера. Поэтому в файл index.php, в том месте, где необходимо вывести слайдер, добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="flexslider"> <ul class="slides"> <li data-thumb="images/1.jpg"> <img src="images/1.jpg"> </li> <li data-thumb="images/2.jpg"> <img src="images/2.jpg"> </li><li data-thumb="images/3.jpg"> <img src="images/3.jpg"> </li><li data-thumb="images/4.jpg"> <img src="images/4.jpg"> </li><li data-thumb="images/5.jpg"> <img src="images/5.jpg"> </li><li data-thumb="images/6.jpg"> <img src="images/6.jpg"> </li><li data-thumb="images/7.jpg"> <img src="images/7.jpg"> </li><li data-thumb="images/8.jpg"> <img src="images/8.jpg"> </li><li data-thumb="images/9.jpg"> <img src="images/9.jpg"> </li> </ul> </div> |
Пока, не обращаем внимание на атрибут data-thumb, мы к нему вернемся при изучении настроек слайдреа. Теперь создадим файл script.js, в котором мы будем писать код на языке javascript, подключим его в файле index.php и добавим следующий код:
|
1 2 3 4 |
$(document).ready(function() { $('.flexslider').flexslider({ }); }); |
То есть, используя библиотеку jquery, выбираем блок с классом flexslider и вызываем метод flexslider. Тем самым выводим сладер на экран. Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Добавление текстового описания
К каждому слайду, можно добавить небольшое текстовое описание. Для этого необходимо изменить htnl разметку слайдера. А именно, в каждый слайд добавить абзац текста:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="flexslider"> <ul class="slides"> <li data-thumb="images/1.jpg"> <img src="images/1.jpg"> <p class="flex-caption">text for Example</p> </li> <li data-thumb="images/2.jpg"> <img src="images/2.jpg"> <p class="flex-caption" >text for Example1</p> </li><li data-thumb="images/3.jpg"> <img src="images/3.jpg"> <p class="flex-caption">text for Example2</p> </li><li data-thumb="images/4.jpg"> <img src="images/4.jpg"> <p class="flex-caption">text for Example3</p> </li><li data-thumb="images/5.jpg"> <img src="images/5.jpg"> <p class="flex-caption">text for Example4</p> </li><li data-thumb="images/6.jpg"> <img src="images/6.jpg"> <p class="flex-caption">text for Example5</p> </li><li data-thumb="images/7.jpg"> <img src="images/7.jpg"> <p class="flex-caption">text for Example6</p> </li><li data-thumb="images/8.jpg"> <img src="images/8.jpg"> <p class="flex-caption">text for Example7</p> </li><li data-thumb="images/9.jpg"> <img src="images/9.jpg"> <p class="flex-caption">text for Example</p> </li> </ul> </div> </div> |
При этом на экране мы увидим следующее:
Теперь давайте изменим вид текстового описания. Для этого опишем правила css для класса flex-caption (данный класс присвоен каждому абзацу с текстом):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.flex-caption { background-color:gray; bottom: 0; color: #FFFFFF; font-size: 14px; left: 0; line-height: 18px; padding: 2%; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); width: 96%; opacity:0.6; margin:-35px 0 0 0; } |
На экране мы увидим следующее:
Настройки
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, будет включена возможность управления слайдером, используя клавиатуру.
Давайте добавим следующие настройки и посмотрим, что у нас получилось:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function() { $('.flexslider').flexslider({ animation:"fade", //easing:"easeOutElastic", animationLoop:true, startAt:5, slideshow:true, slideshowSpeed:2000, animationSpeed:1000, //initDelay:3000, randomize:true, //pauseOnHover:true, pauseOnAction:true, controlNav:'thumbnails', directionNav:true, keyboard:false, }); }); |
При этом для стилизации миниатюр, необходимо добавить следующие правила css:
|
1 2 3 4 5 6 7 |
.flex-control-thumbs img{ width:55px !important; padding:5px; } .flex-control-thumbs li { width:auto !important; } |
Синхронизация двух слайдеров
FlexSlider поддерживает возможность, синхронизации двух слайдеров, при этом один из них работает в обычном режиме, а второй используется как элемент навигации для первого. В данном случае второй слайдер представляет собой ротатор или карусель изображений. Поэтому давайте посмотрим, как реализовать данную возможность. Для этого создаем новую разметку html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<div id = "slider" class="flexslider"> <ul class="slides"> <li data-thumb="images/1.jpg"> <img src="images/1.jpg"> </li> <li data-thumb="images/2.jpg"> <img src="images/2.jpg"> </li><li data-thumb="images/3.jpg"> <img src="images/3.jpg"> </li><li data-thumb="images/4.jpg"> <img src="images/4.jpg"> </li><li data-thumb="images/5.jpg"> <img src="images/5.jpg"> </li><li data-thumb="images/6.jpg"> <img src="images/6.jpg"> </li><li data-thumb="images/7.jpg"> <img src="images/7.jpg"> </li><li data-thumb="images/8.jpg"> <img src="images/8.jpg"> </li><li data-thumb="images/9.jpg"> <img src="images/9.jpg"> </li> </ul> </div> <div id = "carousel" class="flexslider"> <ul class="slides"> <li data-thumb="images/1.jpg"> <img src="images/1.jpg"> </li> <li data-thumb="images/2.jpg"> <img src="images/2.jpg"> </li><li data-thumb="images/3.jpg"> <img src="images/3.jpg"> </li><li data-thumb="images/4.jpg"> <img src="images/4.jpg"> </li><li data-thumb="images/5.jpg"> <img src="images/5.jpg"> </li><li data-thumb="images/6.jpg"> <img src="images/6.jpg"> </li><li data-thumb="images/7.jpg"> <img src="images/7.jpg"> </li><li data-thumb="images/8.jpg"> <img src="images/8.jpg"> </li><li data-thumb="images/9.jpg"> <img src="images/9.jpg"> </li> </ul> </div> |
То есть мы будем выводить два слайдера (первый – слайдер, второй — ротатор) на одной странице, а значит и разметка нужна для каждого из них. Далее, используя javascript, вызываем отображение каждого из слайдеров:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).ready(function() { $('#carousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, itemWidth:100 asNavFor: '#slider', easing: 'easeInElastic', }); $('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, sync: "#carousel", easing: 'easeInElastic' }); }); |
Как Вы видите, вызов слайдеров аналогичен, но есть некоторые замечания. Для ротатора, то есть слайдера, который будет выступать в качестве навигации.
он должен обязательно вызываться первым;
необходимо указать настройку asNavFor (“как навигация для”) и указать в ней селектор блока слайдра (в нашем случае это блок с идентификатором slider);
что бы слайдер выводился в виде ротатора, необходимо задать ширину каждого слайда, используя настройку itemWidth (в нашем случае это 100 пикселей);
Для слайдера, достаточно задать настройку sync (с чем именно синхронизироваться), и передать ей селектор блока с ротатором, в нашем случае это блок с идентификатором carousel. Также добавим несколько правил css для более красивого отображения:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#carousel .slides li { margin:2px; } #carousel img { opacity:0.5; } #carousel img:hover{ opacity:1; } .flex-active-slide img{ opacity:1 !important; } |
И посмотрим, что у нас получилось:
Вот мы с Вами и рассмотрели основные моменты в работе с FlexSlider. На странице //www.woothemes.com/flexslider/, приведена подробная документацию по данному инструменту с описанием тех настроек, которые мы с Вами не затронули.
На этом данный урок завершен! Всего Вам доброго и удачного кодирования!!!
Комментарии (10)