0

Есть слайдер. По клику на слайд, один блок скрывается и появляется другой. На мобильных устройствах слайдер дестроится, поэтому использую .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>

1 ответ 1

-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();

Ваш ответ

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

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