Скрипт-дополнение к jQuery-плагину bxSlider
Когда при верстке сайтов на заказ есть необходимость реализовать слайдер, я использую замечательный jQuery-плагин bxSlider. Он очень прост в установке, настройке и стилизации и поддерживает последние тенденции в веб-разработке, такие, как адаптивность, CSS3-анимацию и корректную работу на мобильных устройствах.
Один из примеров данного плагина — это пагинатор из превьюшек, о котором далее и пойдет речь.
Такой способ реализации имеет ряд недостатков:
- Используется тег ссылки
<a>
, у которого атрибутhref
пустой, т.е. ссылка никуда не ведет. Это не хорошо с точки зрения семантики, а опционально его никак не поменять. - Необходимо прописывать индексы слайдов через атрибут
data-slide-index
. Я считаю, что не стоило так делать, ведь можно было реализовать то же самое и без этого атрибута. - При клике на превьюшку останавливается автоматическая смена слайдов.
- Мне приходилось делать слайдер, в котором слайды переключаются при наведении курсора мыши на превьюшку, а не по клику. Более того, сама превьюшка должна являться ссылкой на какую-то статью сайта. Естественно, вышеуказанный пример с сайта плагина не позволяет это реализовать.
Чтобы обойти данные недостатки, я написал скрипт-дополнение, который работает через предусмотренные на такие случаи опции плагина bxSlider.
Вот код этого скрипта:
var slider = $('#slider'); // селектор слайдера var pagerItem = $('#slider-pager li'); // селектор пункта пагинатора var active = 'active'; // класс активного пункта пагинатора if ( slider.length ) { var prev = false; function pager() { pagerItem.filter('.' + active).each(function() { var el = $(this); if (prev) { if ( el.is(':first-child') ) { el.removeClass(active); pagerItem.filter(':last').addClass(active); } else el.removeClass(active).prev().addClass(active); } else { if ( el.is(':last-child') ) { el.removeClass(active); pagerItem.filter(':first').addClass(active); } else el.removeClass(active).next().addClass(active); } }) } slider.bxSlider({ // опции плагина controls: true, pager: false, auto: true, autoHover: true, pause: 5000, onSlidePrev: function() { prev = true; pager(); }, onSlideNext: function() { prev = false; pager(); } // конец опций }); pagerItem.click(function() { slider.stopAuto(); var index = pagerItem.index($(this)); slider.finish().goToSlide(index); pagerItem.removeClass(active); $(this).addClass(active); }).mouseleave(function() { slider.startAuto(); }); pagerItem.filter(':first').addClass(active); }
Благодаря данному скрипту, в пагинаторе теперь можно использовать любые теги, нет необходимости прописывать индексы, а автосмена слайдов продолжает работать и после клика на превьюшку. Результат посмотрите на живом примере.
А для того, чтобы реализовать задачу из 4-го пункта недостатков, необходимо внести в скрипт две правки:
- Поменять
click
наhover
, чтобы слайд переключался при наведении на превьюшку. - Добавить опцию
useCSS: false
. Суть в том, что по умолчанию анимация переключения слайдов в плагине bxSlider работает с помощью CSS3. И если мы быстро наводим курсор то на одну превьюшку, то на другую, может произойти сбой, когда активный пункт пагинатора не соответствует изображению слайда. А при отключенной CSS-анимации работает jQuery-анимация, которую можно останавливать в нужный момент, благодаря чему такой сбой избегается.
Посмотрите второй пример в действии.