adminvps

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

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

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

Полезные комментарии (1)
Комментарии (59)
  1. 1

    Дима, ты как всегда вовремя!
    Как раз искал что-то подобное как во втором примере.

  2. 3
    Александр

    Здравствуйте, Дмитрий вы случайно не знаете, можно ли в bxslider, подключить прокрутку слайдов колесом мыши. Я вроде бы, где то видел, но теперь не как не могу найти ту статью.

  3. 5
    Николай
    @

    Не могу разобраться как сделать каждый слайд кликабельным в случае с bxslider!? Не подскажите?

  4. 14
    Илья

    так на гитхаб разработчику pull сделайте — всем польза.

  5. 15
    Юрий
    @

    Привет, а можно как-то добавлять класс к активному слайду? Не в пейджере, а именно к слайду.

  6. 19
    Денис

    Привет,
    Подскажите какой слайдер будет нормально работать в Opera 23.0
    На оф. сайте bxslidera нет саппорта operы. Не подскажите от чего это браузер в фаворе?

    • 20

      Этот слайдер, как и любой другой, будет работать без проблем. У меня тоже Opera 23. У нее движок тот же, что и у Google Chrome, поэтому, если где-то указана поддержка Хрома, значит в последних версиях Оперы никаких проблем не будет.

  7. 21
    Владимир
    @

    А как бы мне реализовать двойную навигацию? Слева и справа?

  8. 22
    Игорь

    В этом методе есть недостаток. При слишком быстром перекликивание между превьюшками не успевает отработать скрипт переключения слайдов, т.к. анимация переключения еще не отработала после предыдущего переключения. Самостоятельно написал подобный скрипт, и у меня была такая же проблема, поэтому знаю :-)

  9. 23
    София

    Здравствуйте подскажите пожалуйста а можно цвет заменить при смене слайдера через затемнение ?

  10. 25
    Никита
    @

    Добрый день. Подскажите, можно ли каждому слайду указать гиперссылку? Допустим, чтобы при переходе по ссылке site.ru#2 у посетителя сразу открывался второй слайд.

  11. 27
    Виктор
    @

    Добрый день. А можно сделать загрузку самого js слайдера в конце страницы ?

    • 28

      Конечно можно, как и любой другой скрипт.

      • 29
        Виктор
        @

        Когда я подгружаю 5-ть картинок, то они не очень красиво выводятся (они располагаются друг под другом). Как только в конце их загрузки загружается скрипт слайдера, то все становится красиво.
        Вообще хотелось загрузить только все превьюшки и первую большую. Потом загружается сам скрипт и потом загружаются остальные 4-ре картинки. И еще, когда переходишь между не соседними слайдами, то все слайды находящиеся между ними тоже показываются

  12. 30
    Никита
    @

    А если нужно проделать тоже самое, но без использования превью картинок, а просто на стандартных «точках»? В скрипте ничего менять не нужно? Собственно проблема только в том, что после переходов по «точкам/стрелкам» автоматическая смена перестает работать. Спасибо!

  13. 37
    Андрей

    Подскажите пожалуйста, как сделать, чтобы по клику на текущий слайд происходила прокрутка к следующему слайду?

  14. 39
    Денис
    @

    Подскажите, а как можно добавить animate.css на элементы в слайде, причем чтоб анимация срабатывала каждый раз при показе слайда?

  15. 41
    xyz

    Здравствуйте. Помогите пожалуйста. Для слайдера 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(), или нет?)
    Заранее огромное спасибо!

  16. 42
    Никита
    @

    А что если будет не 5 слайдов как в примере, а скажем 25, можно ли как-то сделать карусель из превьюшек? Спасибо!

  17. 45
    Артем

    Спасибо,реально,этот функционал в bx slider реализован очень криво,но благодря вам теперь всё работает как надо,без вашей доработки у меня не работало переключение слайдов по клику миниатюры,из-за id ссылки. которые начинались не с нуля.! Спасибо вам!

  18. 46
    Алексей
    @

    Слайдер конечно суперовый! Использую и не нарадуюсь ))
    Столкнулся с загвоздкой, может подскажите…
    Слайдер находится в шапке. При клике на слайд, переходим по линку и нужно чтобы на открытой странице, слайдер начинался с того слайда, на который кликнули, а не с самого начала. Был бы очень благодарен за помощь.

  19. 47
    Игорь

    Здравствуйте! А не подскажите, как сделать так, чтобы пагинация не отображалась когда число слайдов меньше заданного максимума (не для случая с превьюшками). Просто как-то не красиво получается, когда я хочу организовать карусель последних просмотренных пользователем товаров и, например, отображаю их по четыре штуки на экран, а пользователь посмотрел 1 товар и видит его в просмотренных вместе с «единичкой» пагинатора. Скорее всего это можно сделать через функцию buildPager, но никак не могу сообразить как. Может зададите нужный вектор для размышлений или кините ссылку на готовый пример. Заранее огромное спасибо.

  20. 48
    Lapkin

    Дмитрий! Спасите! нужен код для реализации вашего второго примера! Прошу Вас выслать файлы для его встройки к сайту. Буду Вам очень признателен

  1. 1

    После этой строки (которая в самом конце):

    pagerItem.filter(':first').addClass(active);

    вставьте:

    $('#slider li').click(function() {
    	slider.stopAuto();
    	slider.finish().goToNextSlide();
    });
Ваш комментарий