Использовать 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 - Настройте плагин
Переходите на страницу "Дополнительные опции" для настройки слайдера.