Flexslider — бесплатный jQuery-слайдер

Перечисли его особенности, которые делают этот слайдер одним из лучших:

Основные особенности слайдера:
- адаптируемый к любым разрешениям дизайн;
- горизонтальные/вертикальные слайды;
- любые HTML-элементы в качестве слайдов;
- использование собственных CSS стилей;
- поддержка устройств на iOS и Android;
- в архиве есть пример страницы с интегрированным слайдером;
- слайдер протестирован на совместимость с браузерами Chrome 4+, Safari 4+, Firefox 3.6+, Opera 10+, IE7+.

И так приступим к его изучению и написанию кода.

HTML

Напишем разметку, она очень проста и вы без труда можете увеличить количество сладов

Код
<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>

CSS

Тут ничего особенного нет, просто оформление слайда по умолчанию. Вы без труда сможете поменять его если вам нужно.

Код
<link rel="stylesheet" href="flexslider.css">

Ну а теперь jQuery

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script>
  $(window).load(function() {
  $('.flexslider').flexslider();
  });
</script>

Для более тонкой настройки распишу что есть что:

Код
animation: "fade", //Вид анимации
slideDirection: "horizontal", //Расположение слайда горизонтально/вертикально
slideshow: true, //Авто проигрывание
useCSS: true, //Использовать CSS3 переходы, если есть
touch: true, //Переключать слайды при использовании тача(переключение пальцем на сенсорном экране)
slideshowSpeed: 7000, //Скорость переключения слайдов(задается в милисекундах)
animationDuration: 600, //Скорость анимации(задается в милисекундах)
directionNav: true, //Стрелки навигации (Вперед/Назад)
controlNav: true, //Подслайдовая навигация (в виде точек)
keyboardNav: true, //Перелистывание слайдов при помощи клавиатуры(Влево/Вправо)
mousewheel: false, //Перелистывание слайдов при помощи колеса мыши
prevText: "Previous", //Текст написанный на кнопке "Назад"
nextText: "Next", //Текст написанный на кнопке "Вперед"
pausePlay: false, //Создание паузы / воспроизведения динамического элемента
randomize: false, //Случайный вывод слайдов
pauseOnAction: true, //Приостановить показ слайдов при взаимодействии с элементами управления, настоятельно рекомендуется.
pauseOnHover: false, //Остановить слайдер при наведении курсора мыши
start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд

  • FalleN

  • 4127

  • 1

  • 308

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!