Некорректная работа скрипта при .resize

151

17 марта 2019, 22:10

Есть слайдер. По клику на слайд, один блок скрывается и появляется другой. На мобильных устройствах слайдер дестроится, поэтому использую .resize. Проблема в том, что после ресайза функция с кликом по слайду как будто зацикливается - отображение/скрытие происходит неопределенное количество раз.

Если прописать в каждое из это условий вывод чего-то в консоли, то при ширине <480px все-равно срабатывают оба условия.. Почему и как решить эту проблему?

Песочница здесь.

var sliderConfig = { 
  margin:10, 
  loop:false, 
  autoWidth:true, 
  items:4, 
  nav: true, 
  dots: false 
} 
 
function toggleBillets() { 
  var slider = $('.custom-carousel'), 
      firstBillet = $('.custom-carousel .first-billet'), 
      secondBillet = $('.custom-carousel .second-billet'), 
      windowWidth = $(document).width(); 
   
  if (windowWidth >= 480) { 
    $('.custom-carousel').addClass('owl-carousel').owlCarousel(sliderConfig); 
     
    firstBillet.click(function() { 
      var currentFirstBillet = $(this), 
          currentSecondBillet = $(this).siblings(secondBillet); 
           
      $(this).slideToggle(function() { 
        firstBillet.not(currentFirstBillet).slideDown(); 
        secondBillet.not(currentSecondBillet).slideUp(); 
         
        currentSecondBillet.animate({ 
          height: 'toggle' 
        }, 350); 
         
        slider.trigger('refresh.owl.carousel'); 
      }) 
    }) 
  } else { 
    slider.trigger('destroy.owl.carousel').removeClass('owl-carousel'); 
  } 
} 
toggleBillets(); 
$(window).resize(toggleBillets);

.owl-carousel .owl-item .item > div { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 200px; 
  color: #fff; 
} 
.owl-carousel .owl-item .item > div h4 { 
  margin: 0; 
} 
.owl-carousel .owl-item .item .first-billet { 
  background: #4DC7A0; 
} 
.owl-carousel .owl-item .item .second-billet { 
  display: none; 
  background: #5d79ff; 
} 
.owl-carousel .owl-nav .owl-next, 
.owl-carousel .owl-nav .owl-prev { 
  font-size: 28px !important; 
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet">  
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.css" rel="stylesheet"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
 
 
 
 
<div class="custom-carousel owl-carousel owl-theme"> 
    <div class="item" style="width:250px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:100px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:500px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:100px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:50px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:250px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:120px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:420px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
    <div class="item" style="width:120px"> 
      <div class="first-billet"> 
        <h4>first</h4> 
      </div> 
      <div class="second-billet"> 
        <h4>second</h4> 
      </div> 
    </div> 
</div>

Answer 1

Потому что ширина документа при ресайзе не соответствует ширине окна. Вот решение.

До:

  var slider = $('.custom-carousel'),
      firstBillet = $('.custom-carousel .first-billet'),
      secondBillet = $('.custom-carousel .second-billet'),
      windowWidth = $(document).width();

После:

  var slider = $('.custom-carousel'),
      firstBillet = $('.custom-carousel .first-billet'),
      secondBillet = $('.custom-carousel .second-billet'),
      windowWidth = $(window).width();