Please tell minSlides: 4 how to add a rule in the script below so that when the screen width is minSlides: 4 values minSlides: 4 , and maxSlides: 4 , change to minSlides: 3 , and maxSlides: 3 and if the screen width is 768px, minSlides: 2 , and maxSlides: 2

How to implement this task in the form of a script?

 jQuery(document).ready(function(){ jQuery('[id*=mod_ext_bxslider_k2_content]').bxSlider({ mode: 'horizontal', randomStart: false, minSlides: 4, maxSlides: 4, slideWidth: 300, slideMargin: 32, adaptiveHeight: false, adaptiveHeightSpeed: 500, easing: 'easeInOutCubic', speed: 1000, controls: true, auto: true, autoControls: false, pause: 7000, autoDelay: 0, autoHover: true, pager: false, pagerType: 'full', pagerShortSeparator: ' / ' }); });

When I do like this (as indicated below) everything works, but for me it is wrong to duplicate all the values ​​and there should be a more elegant solution.

 $(window).on('load resize', function(){if ($(window).width() <= 1200) $('[id*=mod_ext_bxslider_k2_content]').bxSlider({ mode: 'horizontal', randomStart: false, minSlides: 3, maxSlides: 3, slideWidth: 300, slideMargin: 32, adaptiveHeight: false, adaptiveHeightSpeed: 500, easing: 'easeInOutCubic', speed: 1000, controls: true, auto: true, autoControls: false, pause: 7000, autoDelay: 0, autoHover: true, pager: false, pagerType: 'full', pagerShortSeparator: ' / ' }); }); $(window).on('load resize', function(){if ($(window).width() <= 768) $('[id*=mod_ext_bxslider_k2_content]').bxSlider({ mode: 'horizontal', randomStart: false, minSlides: 2, maxSlides: 2, slideWidth: 300, slideMargin: 32, adaptiveHeight: false, adaptiveHeightSpeed: 500, easing: 'easeInOutCubic', speed: 1000, controls: true, auto: true, autoControls: false, pause: 7000, autoDelay: 0, autoHover: true, pager: false, pagerType: 'full', pagerShortSeparator: ' / ' }); });

  • one
    $ (window) .resize (function () {If ($ (window) .width ()> 1200) {minSlides = 4}}); - Daniel

1 answer 1

For example:

 var minS = 4; // minSlides var maxS = 4; // maxSlides $(window).on('load resize', function(){ if ($(window).width() <= 768) { minS = 2; maxS = 2; } if ($(window).width() >= 1200) { minS = 3; maxS = 3; } $('[id*=mod_ext_bxslider_k2_content]').bxSlider({ mode: 'horizontal', randomStart: false, minSlides: minS, maxSlides: maxS, slideWidth: 300, slideMargin: 32, adaptiveHeight: false, adaptiveHeightSpeed: 500, easing: 'easeInOutCubic', speed: 1000, controls: true, auto: true, autoControls: false, pause: 7000, autoDelay: 0, autoHover: true, pager: false, pagerType: 'full', pagerShortSeparator: ' / ' }); });
  • Thank you very much! What you need, works as you need, and there is no extra code! - Slava
  • And tell me how to add an additional rule correctly: if ($(window).width() <= 480) { minS = 1; maxS = 1; } if ($(window).width() <= 480) { minS = 1; maxS = 1; } if ($(window).width() <= 480) { minS = 1; maxS = 1; } I think it doesn't work because of the if ($(window).width() <= 768) { minS = 2; maxS = 2; } if ($(window).width() <= 768) { minS = 2; maxS = 2; } if ($(window).width() <= 768) { minS = 2; maxS = 2; } And how to add to react and at 768 and 480 do not have enough knowledge ?! - Slava
  • I apologize for the trouble) I do not know how correct it is, but it worked after I changed the lines in places (first the rule for 768 and then for 480 then everything that is more than 1200), it seems to work as it should. Thanks again for your reply! - Slava