Скрипт-дополнение к jQuery-плагину bxSlider

Когда при верстке сайтов на заказ есть необходимость реализовать слайдер, я использую замечательный jQuery-плагин bxSlider. Он очень прост в установке, настройке и стилизации и поддерживает последние тенденции в веб-разработке, такие, как адаптивность, CSS3-анимацию и корректную работу на мобильных устройствах.

Один из примеров данного плагина — это пагинатор из превьюшек, о котором далее и пойдет речь.

Такой способ реализации имеет ряд недостатков:

1. Используется тег ссылки <a>, у которого атрибут href пустой, т.е. ссылка никуда не ведет. Это не хорошо с точки зрения семантики, а опционально его никак не поменять.
2. Необходимо прописывать индексы слайдов через атрибут data-slide-index. Я считаю, что не стоило так делать, ведь можно было реализовать то же самое и без этого атрибута.
3. При клике на превьюшку останавливается автоматическая смена слайдов.
4. Мне приходилось делать слайдер, в котором слайды переключаются при наведении курсора мыши на превьюшку, а не по клику. Более того, сама превьюшка должна являться ссылкой на какую-то статью сайта. Естественно, вышеуказанный пример с сайта плагина не позволяет это реализовать.

Чтобы обойти данные недостатки, я написал скрипт-дополнение, который работает через предусмотренные на такие случаи опции плагина 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-го пункта недостатков, необходимо внести в скрипт две правки:

1. Поменять click на hover, чтобы слайд переключался при наведении на превьюшку.
2. Добавить опцию useCSS: false. Суть в том, что по умолчанию анимация переключения слайдов в плагине bxSlider работает с помощью CSS3. И если мы быстро наводим курсор то на одну превьюшку, то на другую, может произойти сбой, когда активный пункт пагинатора не соответствует изображению слайда. А при отключенной CSS-анимации работает jQuery-анимация, которую можно останавливать в нужный момент, благодаря чему такой сбой избегается.

Посмотрите второй пример в действии.