I use as a slider bxslider. Tell me how to implement such a thing, if the size of the browser window is less than 550px, then load the slider in which the property indicates that you need to show one slide, and if the screen size is larger then show 4 slides

$(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); })
  • one
    make the object sliderConfig = {}; in which general settings for all sliders or screen sizes will be specified .... then, depending on the conditions, add if (условие) { sliderConfig.minSlides = 4; sliderConfig.maxSlides= 4; } if (условие) { sliderConfig.minSlides = 4; sliderConfig.maxSlides= 4; } if (условие) { sliderConfig.minSlides = 4; sliderConfig.maxSlides= 4; } .... and then just call the slider with the $('.bxslider2').bxSlider(sliderConfig); - Alexey Shimansky
  • Thanks understood, but one bug is not clear, why if I make the browser window again more than 550 pixels the slider does not work - ChromeChrome

1 answer 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(); });
  • this option is just as bad resize - ChromeChrome