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

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

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

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

Первым делом необходимо установить данный слайдер. Для этого переходим на официальный сайт 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 – стили СSS слайдера;

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

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

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

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

<!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 и подключим его к странице:

<link rel="stylesheet" href="css/flexslider.css" type="text/css">

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

<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, в том месте, где необходимо вывести слайдер, добавим следующий код:

<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 и добавим следующий код:

$(document).ready(function() {
	$('.flexslider').flexslider({
	});
});

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

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

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

<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 (данный класс присвоен каждому абзацу с текстом):

.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:

<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, вызываем отображение каждого из слайдеров:

$(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/, приведена подробная документацию по данному инструменту с описанием тех настроек, которые мы с Вами не затронули.

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

Комментарии Facebook:

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

  1. Natasha

    Виктор, огромное Вам спасибо, вы прирожденный преподаватель, вы просто умница, я в jquery полный чайник, но так как Вы это все объясняете, нужно очень постараться, чтобы не понять. После Вашего урока, слайдеры, карусели перестали быть чем то страшным и не понятным. Спасибо!!!

    • Виктор Гавриленко

      Здравствуйте, Наташа!
      Очень рад, что урок Вам понравился и спасибо за теплые слова.

  2. Михаил

    Виктор, спасибо за урок. Всё доходчиво и интересно. Но вот какой вопрос у меня возник. Возможно ли на основе flexslaider создать на каждом изображении интерактивные модули? А именно когда изображение меняется, каждое изображение при наведенном на него курсоре, не сдвигается (это работает без проблем). .. Вот чего не знаю как сделать, так что бы на каждом сменяющем друг друга изображении, были некие элементы (плюсики, или иные элементы) при нажатии на которые, всплывать бы некое окно с описанием. Например увеличенная часть основного изображения с текстовым описанием.

  3. Артур

    Сделайте урок по lightGallery
    http://sachinchoolur.github.io/lightGallery/

    • Виктор Гавриленко

      Здравствуйте, Артур!
      Спасибо за предложение, мы подумаем об этом.

  4. Зевс

    День добрый. Постоянно пользуюсь этим слайдером, очень удо6ный. А есть возможность прокрутки изображений одновременно по вертикали и горизонтали т.е. во все стороны?

  5. Артем

    А пытались прикрутить вместе flexslider и highcharts? Чтобы в ротации участвовали графики.

  6. sejunctus

    Здравствуйте!
    А возможно ли использовать вместо шрифтов изображения для навигации?

  7. Николай

    Пробовал установить слайдер на WP. После установки файлов из урока — выводился блок для слайдера, но не выводились ни изображения, ни кнопки навигации.
    Скачал и перезалил файлы с официального сайта FlexSlider — остался 1px под слайдер (но его не видно — все прозрачно) и отступы. В чем может быть проблема?

  8. Абай

    Спасибо большое! Отличный урок!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree