Від автора: при створенні сайтів дуже часто виникає необхідність в публікації на його сторінках різних медіа матеріалів. Наприклад, фотографій або зображень з невеликим текстовим описом. При цьому дуже зручно контент даного типу виводити у вигляді ротатора або слайдшоу, особливо, якщо необхідно вивести велику кількість зображень на одній сторінці. Тому в даному уроці ми з Вами розглянемо слайдер 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/, наведена детальна документацію по даному інструменту з описом тих параметрів, які ми з Вами не торкнулися.
На цьому урок закінчено! Всього Вам доброго і вдалого кодування!!!
