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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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