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