Форма входа
Запомнить меня Забыл пароль ?

Адаптивный слайдер - FlexSlider


Адаптивный слайдер - FlexSlider
Удобный, красивый и адаптивный слайдер - FlexSlider.Позволяет использовать миниатюры с навигацией, так же возможность вставлять видео в слайд.
Для работы требует jQuery 1.4.2+.

Рассмотрим первый пример из Демо.

Контейнер в котором находится список наших слайдов с картинками:
[HTML]<div class="flexslider">
<ul class="slides">
<li>
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li>
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
<li>
<img src="images/5.jpg" />
</li>
<li>
<img src="images/6.jpg" />
</li>
</ul>
</div>[/HTML]

Подключаем стили плагина:
[CSS]<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />[/CSS]

Подключается jQuery, сам плагин и инициализацию:
[JavaScript]<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>

<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>[/JavaScript]

Еще примеры вы можете посмотреть в демо.

Использование функций

  • pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
  • pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
  • useCSS: true, //{Новое} Boolean: Slider will use CSS3 transitions if available
  • touch: true, //{Новое} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
  • video: false, //{Новое} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches


Первичное управление

  • controlNav: true, //Boolean: Создание навигации для постраничного управления каждым слайдом.
  • Замечание: оставьте true для использования manualControls
  • directionNav: true, //Boolean: Создание навигации для кнопок назад/вперед (true/false)
  • prevText: "Previous", //String: Тест для кнопки "previous" пункта directionNav
  • nextText: "Next", //String: Тест для кнопки "next" пункта directionNav


Вторичная навигация

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


Специальные свойства

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


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

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


Callback API
start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
before: function(){}, //Callback: function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
after: function(){}, //Callback: function(slider) - Срабатывает после каждой завершенной анимацией слайдера
end: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
added: function(){}, //{Новое} Callback: function(slider) - Срабатывает после того, как слайд добавлен
removed: function(){} //{Новое} Callback: function(slider) - Срабатывает после того, когда слайд удален

Адаптивный слайдер - FlexSlider
Опубликовал: web-deva
Используемый код: HTML CSS JavaScript
Web-сайт автора: http://www.woothemes.com/flexslider/
СКАЧАТЬ

Размер файла: 1.24 Mb

ДЕМО

Посмотреть
живой пример

Комменты


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
Отправить отзыв
Ваше имя *:
E-mail отправителя *:
Тема *:
Текст сообщения *:
Код безопасности *: