0

Использую в качестве слайдера bxslider. Подскажите, как реализовать такую вещь, если размер окна браузера меньше 550px то загружать слайдер в котором свойстве указанно, что нужно показывать один слайд , а если размер экрана больше то показывать 4 слайда

$(document).ready(function(){
    function windowSize(){
    if ($(window).width() <= '550'){
        $('.bxslider2').bxSlider({
            controls:true,
            pager:false,
            minSlides: 1,
            maxSlides: 1,
            moveSlides: 1,
            slideMargin: 25,
            slideWidth: 255,
            startSlide: 0, 
            nextText:"",
            prevText:"",
            infiniteLoop:true
        });
    } else {
      $('.bxslider2').bxSlider({
            controls:true,
            pager:false,
            minSlides: 4,
            maxSlides: 4,
            moveSlides: 1,
            slideMargin: 25,
            slideWidth: 255,
            startSlide: 0, 
            nextText:"",
            prevText:"",
            infiniteLoop:true
        });
    }
}
$(window).load(windowSize); 
$(window).resize(windowSize);
})
2
  • 1
    сделать объект sliderConfig = {}; в котором будут прописаны общие настройки для всех слайдеров или размеров экрана.... потом в зависимости от условий добавить поля if (условие) { sliderConfig.minSlides = 4; sliderConfig.maxSlides= 4; } .... а затем просто вызывать слайдер с настройками $('.bxslider2').bxSlider(sliderConfig); 15 авг 2016 в 12:46
  • спасибо понял, но не понятен остался один баг, почему если я делаю окно браузера снова больше 550 пикселей слайдер не работает 15 авг 2016 в 13:02

1 ответ 1

1
var slider;    
function bxslider(){
       var width = $(window).width();

        if(width>555 && width<=765){
        slider=$('.bxslider2').bxSlider({
            minSlides: 2,
            maxSlides: 2,
            slideWidth:400,
            moveSlides:1
        });

    }
    if(width<=555){
        var slider=$('.bxslider2').bxSlider({
            minSlides: 1,
            maxSlides: 1,
            slideWidth:0,
            moveSlides:1
       });

    }
    slider.reloadSlider();
}
$(window).on("orientationchange load resize", function () {
    bxslider();
});
1
  • данный вариант так же плохо ресайзит 15 авг 2016 в 13:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.