Javascript-форум - onresize не работает если добавлять условия

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - onresize не работает если добавлять условия (https://javascript.ru/forum/jquery/75922-onresize-ne-rabotaet-esli-dobavlyat-usloviya.html)

onresize не работает если добавлять условия

Здравствуйте! Есть скрипт который при загрузке определяет размер окна, а так отслеживает изменение размера

var win = $(this); //this = window
$(function(){
fnName();
window.onresize = fnName;
});
 
function fnName(){
if (win.width() <= 992) {
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 460,
            minSlides: 1,
            maxSlides: 1,
            speed: 800,
        });
    }else if (win.width() > 992 && win.width() < 1200) {
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 2,
            maxSlides: 2,
            speed: 800,
        });
    }else if (win.width() > 1200) {
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 3,
            maxSlides: 3,
            speed: 800,
            touchEnabled: false,
        });
    }
}

При загрузке проверяет, а вот при изменении код не меняется на другой, только если использовать 1 код без других которые в else if

var win = $(this);

замените на всякий на

var win = $(window);

Дело не в условии, читайте документацию к плагину

попробуйте после каждого if сначала
$('.bxslider').destroySlider();

if (win.width() <= 992) {
$('.bxslider').destroySlider();
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 460,
            minSlides: 1,
            maxSlides: 1,
            speed: 800,
        });
    }

Цитата:

Сообщение от j0hnik

попробуйте после каждого if сначала
$('.bxslider').destroySlider();

идея правильная, но прежде чем разрушить, надо создать!

Цитата:

Сообщение от рони

идея правильная, но прежде чем разрушить, надо создать!

да, там еще есть метод reloadSlider() наверное можно добавить после инициализации, и не разрушать

bxSlider update resize

dranoc,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
 <style type="text/css">
   .bx-wrapper{
       margin: 0 auto;
   }
 </style>

  <script>
$(function() {
    function fnSettings() {
        var settings = {
                mode: "horizontal",
                moveSlides: 1,
                slideMargin: 30,
                infiniteLoop: true,
                slideWidth: 460,
                minSlides: 1,
                maxSlides: 1,
                speed: 800
            },
            width = $(window).width();
        if (width > 992 && width < 1200) settings = {
            mode: "horizontal",
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 2,
            maxSlides: 2,
            speed: 800
        };
        if (width > 1200) settings = {
            mode: "horizontal",
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 3,
            maxSlides: 3,
            speed: 800,
            touchEnabled: false
        };
        return settings
    }
    var settings = fnSettings();
    var bxslider = $(".bxslider").bxSlider(settings);
    $(window).resize(function() {
        settings = fnSettings();
        bxslider.reloadSlider(settings)
    })
});
  </script>
</head>

<body>

<div class="bxslider">
  <div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>


</body>
</html>

cпасибо, работает!