FlexSlider — простий ротатор вмісту

19.01.2018

Від автора: при створенні сайтів дуже часто виникає необхідність в публікації на його сторінках різних медіа матеріалів. Наприклад, фотографій або зображень з невеликим текстовим описом. При цьому дуже зручно контент даного типу виводити у вигляді ротатора або слайдшоу, особливо, якщо необхідно вивести велику кількість зображень на одній сторінці. Тому в даному уроці ми з Вами розглянемо слайдер FlexSlider, що дозволяє швидко і легко створити слайдшоу або ротатор необхідного Вам контенту.

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

Насамперед необхідно встановити даний слайдер. Для цього переходимо на офіційний сайт http://flexslider.woothemes.com/. І викачуємо актуальну версію сдайдера FlexSlider (натиснувши на кнопку Download Flexslider).

Так само для роботи даного слайдера необхідна бібліотека jQuery, тому перейдемо на офіційний сайт цієї бібліотеки (http://jquery.com і також завантажити її. І останнє, для підтримки всіх анімаційних ефектів, потрібно плагін jquery.easing. Тому перейдемо на сайт http://gsgd.co.uk/sandbox/jquery/easing/ завантажити даний плагін.

В результаті завантаження слайдера FlexSlider ми отримуємо архів, з наступними файлами і папками:

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

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

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

changelog.txt – опису змін у поточній версії;

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

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

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

README.mdown – оиписание слайдера від виробника.

Тепер створимо тестову сторінку index.php:

FLEXSLIDER

FlexSlider простий ротатор вмісту

Зверніть увагу, що я створив папку css і в ній, розмістив файл style.css – це стилі для тестової сторінки. В дану папку скопіюємо файл стилів flexslider.css і підключимо його на сторінці:

Також підключимо, бібліотеки, які ми завантажили і скрипт FlexSlider:

Далі створимо папку images і скопіювати в неї кілька зображень для прокручування в майбутньому слайдері. Також скопіювати вміст однойменної папки з архіву FlexSlider. І нарешті папку fonts копіюємо в папку css. На цьому установка слайдера завершена.

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

Насамперед необхідно створити розмітку для майбутнього слайдера. Тому в файл index.php у тому місці, де необхідно вивести слайдер, додамо наступний код:

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

$(document).ready(function() {
$(‘.flexslider’).flexslider({
});
});

Тобто, використовуючи бібліотеку jquery, вибираємо блок з класом flexslider і викликаємо метод flexslider. Тим самим виводимо сладер на екран. Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

Додавання текстового опису

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

text for Example
text for Example1
text for Example2
text for Приклад 3
text for Приклад 4
text for Example5
text for Example6
text for Example7
text for Example

При цьому на екрані ми побачимо наступне:

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

.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, буде включена можливість управління слайдером, використовуючи клавіатуру.

Давайте додамо наступні налаштування і подивимося, що у нас вийшло:

$(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:

.flex-control-thumbs img{
width:55px !important;
padding:5px;
}
.flex-control-thumbs li {
width:auto !important;
}

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

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

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

$(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 для більш гарного відображення:

#carousel .slides li {
margin:2px;
}
#carousel img {
opacity:0.5;
}
#carousel img:hover{
opacity:1;
}
.flex-active-slide img{
opacity:1 !important;
}

І подивимося, що у нас вийшло:

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

На цьому урок закінчено! Всього Вам доброго і вдалого кодування!!!