• Заголовки и надписи. Для лучшего восприятия изображений.

  • Изображение, которое помещенно в ссылку.

  1. 1
  2. 2
  3. 3
  4. 4

Почему FlexSlider?

  • Простая семантическая разметка
  • Поддерживается во всех основных браузерах
  • Анимации затухания и выскальзывания
  • Различные опции для настройки
  • Навигация направления с клавиатуры
  • Легкий (4kb в минимизированном варианте)
  • Использует любой элемент HTML как слайд
  • Создан для новичков и профессионалов
  • Бесплатное использование по лицензии MIT
  • Быстрый старт

    базовые установки
  • Дополнительные опции

    настройте ваш слайдер

Использовать FlexSlider просто и легко!

Шаг 1 - Подсоединяем файлы

Добавьте следующие пункты в раздел <head> вашей страницы. Это подключение библиотеки jQuery и ядра плагина FlexSlider.

<!-- Разместите код в разделе <head> вашей страницы -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

Шаг 2 - Добавьте разметку

Разметка для плагина FlexSlider простая и понятная. Начните с контейнера <div class="flexslider">, а затем создайте в нем элемент <ul class="slides">. Важно указывать данный класс, потому что слайдер использует его. Разместите ваши изображения и другие элементы в пунктах списка <li> и разметка готова к работе.

<!-- Разместите код в разделе <body> вашей страницы -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

Шаг 3 - Запускаем слайдер

И в завершении надо добавить следующий код Javascript в раздел <head> вашей страницы ниже ссылок, добавленных на шаге 1. Использовать $(window).load() необходимо, так как содержание страницы должно быть загружено до инициализации плагина.

<!-- Разместите код в разделе <head> вашей страницы, после ссылок на библиотеки и стили -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

...и слайдер работает! Базовая установка плагина завершенена.

Шаг 4 - Настройте плагин

Переходите на страницу "Дополнительные опции" для настройки слайдера.