Скрипт-дополнение к 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-анимация, которую можно останавливать в нужный момент, благодаря чему такой сбой избегается.
Посмотрите второй пример в действии.
Смотрите также
Всплывающее окно при первом посещении сайта на jQuery
Представляю вашему вниманию гостевой пост от Сергея Предводителева, одного из разработчиков Арктической Лаборатории. * * * На некоторых сайтах необходимо при первом посещении показывать посетителю информацию во всплывающем окне. Это ...
jQuery Form Styler - плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; ...
jQuery-плагин для стилизации input[type="radio"]
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью ...
jQuery-плагин для стилизации input[type="checkbox"]
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в ...
Комментарии (60)
А как бы мне реализовать двойную навигацию? Слева и справа?
В этом методе есть недостаток. При слишком быстром перекликивание между превьюшками не успевает отработать скрипт переключения слайдов, т.к. анимация переключения еще не отработала после предыдущего переключения. Самостоятельно написал подобный скрипт, и у меня была такая же проблема, поэтому знаю :-)
Здравствуйте подскажите пожалуйста а можно цвет заменить при смене слайдера через затемнение ?
Не совсем понимаю, что вы имеете в виду.
Добрый день. Подскажите, можно ли каждому слайду указать гиперссылку? Допустим, чтобы при переходе по ссылке site.ru#2 у посетителя сразу открывался второй слайд.
Для этого нужно дорабатывать скрипт.
Добрый день. А можно сделать загрузку самого js слайдера в конце страницы ?
Конечно можно, как и любой другой скрипт.
Когда я подгружаю 5-ть картинок, то они не очень красиво выводятся (они располагаются друг под другом). Как только в конце их загрузки загружается скрипт слайдера, то все становится красиво.
Вообще хотелось загрузить только все превьюшки и первую большую. Потом загружается сам скрипт и потом загружаются остальные 4-ре картинки. И еще, когда переходишь между не соседними слайдами, то все слайды находящиеся между ними тоже показываются
А если нужно проделать тоже самое, но без использования превью картинок, а просто на стандартных «точках»? В скрипте ничего менять не нужно? Собственно проблема только в том, что после переходов по «точкам/стрелкам» автоматическая смена перестает работать. Спасибо!
Для этого мой скрипт не нужен. А, что работала автоматическая смена, нужно сделать так:
Спасибо, но решение не работает(
У меня работает.
Тоже почему-то не работает.
Куда вставить ваш текст для запуска автоматического переключения слайдера, после того как в ручную переключил слайды??
$(‘#slider’).bxSlider({
…,
onSlideAfter: function() { slider.startAuto(); }
});
Туда же, куда и прописываются все остальные опции слайдера. Я же показал пример. Многоточие — это другие опции.
Подскажите пожалуйста, как сделать, чтобы по клику на текущий слайд происходила прокрутка к следующему слайду?
После этой строки (которая в самом конце):
вставьте:
Подскажите, а как можно добавить animate.css на элементы в слайде, причем чтоб анимация срабатывала каждый раз при показе слайда?
Тут можно посмотреть решения:
http://stackoverflow.com/questions/23887748/bxslider-text-effects-animate-css
http://stackoverflow.com/questions/19081763/bxslider-animate-css-on-current-slide-only
Здравствуйте. Помогите пожалуйста. Для слайдера bxslider я задаю пагинацию слайдов с помощью функции buildPager:
$slider = $(‘.bxslider’).bxSlider({
auto: true,
autoControls: true,
speed: 500,
buildPager: function(slideIndex){
switch(slideIndex){
case 0: /* первый слайд не имеет ячейку пагинации */
return;
case 1:
return ‘
‘;
case 2:
return ‘
‘;
case 3:
return ‘
‘;
}
}
});
Где в классах .logon задаются бэкграунд-картинки для неактивных ячеек пагинации.
Также в классах .logon-active задаются бэкграунд-картинки для активных ячеек пагинации.
Как сделать, чтобы при клике на соответствую ячейку пагинации, а также для соответствующего этой ячейки слайда (при автоматическом пролистывании), менялся бэкграунд данной ячейки.
(Всё что я знаю, что тут надо применять методы removeClass() addClass(), или нет?)
Заранее огромное спасибо!
А что если будет не 5 слайдов как в примере, а скажем 25, можно ли как-то сделать карусель из превьюшек? Спасибо!
Мне не раз требовался подобный функционал, но с bxSlider мне это так и не удалось сделать. Использую плагин Owl Carousel.
Спасибо, попробую
Спасибо,реально,этот функционал в bx slider реализован очень криво,но благодря вам теперь всё работает как надо,без вашей доработки у меня не работало переключение слайдов по клику миниатюры,из-за id ссылки. которые начинались не с нуля.! Спасибо вам!
Слайдер конечно суперовый! Использую и не нарадуюсь ))
Столкнулся с загвоздкой, может подскажите…
Слайдер находится в шапке. При клике на слайд, переходим по линку и нужно чтобы на открытой странице, слайдер начинался с того слайда, на который кликнули, а не с самого начала. Был бы очень благодарен за помощь.
Здравствуйте! А не подскажите, как сделать так, чтобы пагинация не отображалась когда число слайдов меньше заданного максимума (не для случая с превьюшками). Просто как-то не красиво получается, когда я хочу организовать карусель последних просмотренных пользователем товаров и, например, отображаю их по четыре штуки на экран, а пользователь посмотрел 1 товар и видит его в просмотренных вместе с «единичкой» пагинатора. Скорее всего это можно сделать через функцию buildPager, но никак не могу сообразить как. Может зададите нужный вектор для размышлений или кините ссылку на готовый пример. Заранее огромное спасибо.
Дмитрий! Спасите! нужен код для реализации вашего второго примера! Прошу Вас выслать файлы для его встройки к сайту. Буду Вам очень признателен
Весь код находится в примерах.
Сделал все как указанно, но при наведении мыши не срабатывает слайдер. Что может быть не так?
Видимо, где-то допустили ошибку в коде. Сравнивайте с примером.
Не работает переключение картинок с пейджинга на версии jquery 1.8.2 (превьюшки не кликабельны). Не подскажите что нужно поправить чтобы заработало на данной версии? На версии 1.9.1 работает, но использовать данную библиотеку не могу, т.к. много старых скриптов для старых версий (например pirobox)
Сам нашел. Вот решение — http://javascript.ru/forum/showthread.php?p=338588 (второй пост)
А использование плагина jQuery Migrate не поможет?
Спасибо! Очень классный скрипт !
Что оставить только для реализации привью без data-slide-index?
Если кому-то понадобиться генератор кода настроек bxslider то вот Вам ссылка http://www.hmil.ru/generator-bxslider/
Добрый вечер использовал Ваш скрипт, но не понимаю как в превьюве сделать чтоб было больше картинок, всмысле добавляю картинки но они добовляются вторм рядом.
Такое, к сожалению, не предусмотрено.