Главная JavaScript

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

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-анимация, которую можно останавливать в нужный момент, благодаря чему такой сбой избегается.

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

Комментарии (60)

  1. Сделал все как указанно, но при наведении мыши не срабатывает слайдер. Что может быть не так?

  2. Не работает переключение картинок с пейджинга на версии jquery 1.8.2 (превьюшки не кликабельны). Не подскажите что нужно поправить чтобы заработало на данной версии? На версии 1.9.1 работает, но использовать данную библиотеку не могу, т.к. много старых скриптов для старых версий (например pirobox)

  3. Спасибо! Очень классный скрипт !

  4. Что оставить только для реализации привью без data-slide-index?

  5. Если кому-то понадобиться генератор кода настроек bxslider то вот Вам ссылка http://www.hmil.ru/generator-bxslider/

  6. Добрый вечер использовал Ваш скрипт, но не понимаю как в превьюве сделать чтоб было больше картинок, всмысле добавляю картинки, но они добовляются вторм рядом.

Ваш комментарий