Все для создания и продвижения сайтов

Верстка, программирование, SEO

Flexslider - настройка слайдера

Отличный адаптивный слайдер flexslider, очень удобен и прост в настройке, имеет много возможностей.

Варианты слайдера

  • Простой слайдер
  • Слайдер с миниатюрами
  • Слайдер - карусель
  • Видео - слайдер

Скачать flexslider Демо

Адаптивный flexslider

Давайте рассмотрим подключение слайдера.

CSS

Подключим стили слайдера в тег head

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

HTML

<section class="slider">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/img1.jpg" />
            </li>
            <li>
                <img src="images/img2.jpg" />
            </li>
            <li>
                <img src="images/img3.jpg" />
            </li>
            <li>
                <img src="images/img4.jpg" />
            </li>
        </ul>
    </div>
</section>

Javascript

В конце кода подключим jquery и скрипты самого слайдера

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
	$(window).load(function(){
	  $('.flexslider').flexslider({
		animation: "slide"
	  });
	});
</script>

Рассмотрим стандартные настройки, которые выбраны по умолчанию

Настройка Описание
namespace: "flex-",Префикс класса, который автоматически добавляется к каждому слайду
selector: ".slides > li", Должен соответствовать простому шаблону.
animation: "fade", Тип анимации, "fade" или "slide"
easing: "swing", Определяет переход поддерживаемый плагином jQuery easing.
direction: "horizontal", Выбор направления смены изображений "horizontal" или "vertical"
reverse: false, Реверс направления анимации
animationLoop: true, Цикличность анимации. Если false, directionNav будет добавлять класс "disable" на обоих концах слайдера
smoothHeight: false, Разрешить высоту ползунка, чтобы придать гладкую анимацию в горизонтальном режиме
startAt: 0, Слайд с какого должно начинаться слайдшоу. Массив (0 = первый слайд)
slideshow: true, Включение автослайдшоу
slideshowSpeed: 7000, Скорость слайдшоу в мс
animationSpeed: 600, Скорость анимации в мс
initDelay: 0, Задержка инициализации в мс
randomize: false, Случайный порядок слайдов

Функции слайдера

Настройка Описание
pauseOnAction: true,Остановка слайдера при наведении на элементы управления
pauseOnHover: false,Остановка слайдера при наведении на него
useCSS: true,Использование CSS3 переходов, если они имеются
touch: true,Разрешить навигацию по сенсеру, удобно на смартфонах и планшетах.
video: false,При использовании видео в слайдере, будет препятствовать CSS3 3D-преобразования, чтобы избежать графические глюки

Стандартная навигация

Настройка Описание
controlNav: true,Включение или отключение пагинации слайдера
directionNav: true,Включение или отключение навигации слайдера
prevText: "Previous",Текст для кнопки "предыдущий слайдер"
nextText: "Next",Текст для кнопки "следующий слайдер"

Дополнительная навигация

Настройка Описание
keyboard: true, Разрешает навигацию с помощью стрелок на клавиатуре (влево/вправо)
multipleKeyboard: false, Разрешает управление с помощью клавиатуры по несколькими слайдерами. Поведение по умолчанию вырезает возможность управления клавиатурой при использовании более одного слайдера
mousewheel: false, Требуется плагин jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Управление навигацией по слайдам с помощью колесика мыши
pausePlay: false, Создание динамического pause/play элемента
pauseText: "Pause", Текст для кнопки "pause" элемента pausePlay
playText: "Play", Текст для кнопки "play" элемента pausePlay

Свойства

Настройка Описание
controlsContainer: "", jQuery Object/Selector: Объявление какой контейнер элементов навигации будет применен. По умолчанию это FlexSlider. Например, можно использовать так $(".flexslider-container"). Свойство игнорируется если элемент не найден.
manualControls: "", jQuery Object/Selector: Объявление пользовательской панели управления навигацией. Примером может быть $(".flex-control-nav li") или "#tabs-nav li img", и т.п.. Количество элментов в вашей controlNav должно совпадать с количеством слайдов/табов.
sync: "", Зеркало действий выполняемых над этим слайдером с помощью другого слайдера. Используйте с осторожностью.
asNavFor: "", Внутренние свойства направленные на превращение слайдера в миниатюры с возможностью навигации для другого слайдера

Опции карусели

Настройка Описание
itemWidth: 0, : Ширина Box-model отдельных элементов карусели, включая горизонтальные границы и отступы (padding)
itemMargin: 0, Отступ между элментами карусели
minItems: 0, Минимальное количество элементов карусели, которые будут видимы. Элементы будут плавно изменять размер при значении ниже заданного
maxItems: 0, Максимальное количество элментов карусели, которые будут видимы. Элементы будут плавно изменять размер при превышении этого лимита.
move: 0, Количество элментов в карусели, которые должны двигаться по анимации. Если 0, то слайдер будет двигать все видимые элементы

API слайдера

Настройка Описание
start: function(){}, function(slider) - Срабатывает, когда слайдер загружает первый слайд
before: function(){}, function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
after: function(){}, function(slider) - Срабатывает после каждой завершенной анимацией слайдера
end: function(){}, function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
added: function(){}, Callback: function(slider) - Срабатывает после того, как слайд добавлен
removed: function(){} Callback: function(slider) - Срабатывает после того, когда слайд удален
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.