Как выключить слайдер при уменьшении ширины и высоты?

Question

[Анастасия]

У меня на странице есть вертикальный слайдер. Каждый слайд имеет высоту 100vh и прокручивается по одному слайду.

<div class="slider">
            <div class="slider-children" style="height: 100vh;">
                <h1>Slider 1</h1>
            </div>
            <div class="slider-children" style="height: 100vh;">
                <h1>Slider 2</h1>
            </div>
            <div class="slider-children" style="height: 100vh;">
                <h1>Slider 3</h1>
            </div>
        </div>

Но при уменьшении высоты или ширины я отключаю slick js, чтобы слайды прокручивались как обычная страница (блок под блоком):

$(window).on("load resize orientationchange", function () {
    $(".slider").each(function () {
      if ($(window).width() < 1390 || $(window).height() < 700) {
        if ($(".slider").hasClass("slick-initialized")) {
          $(".slider").slick("unslick");
        }
      }
    });
  });

Проблема заключается в том, что в некоторых слайдах .slider-children есть свои собственные горизонтальные слайды:

<div class="slider-children" style="height: 100vh;">
                <h1>Slider 2</h1>
                <div class="horizontal-slider">
                    <div class="horizontal-slider_children">
                        Slide 2-1
                    </div>
                    <div class="horizontal-slider_children">
                        Slide 2-2
                    </div>
                </div>
            </div>

и они тоже выключаются при срабатывании скрипта. Что сделать чтобы слайды в середине .slider-children не отключались?

Answer 1

[Stalker_RED]

Вместо $(".slider").slick("unslick"); напишите такой селектор, который подходит только к большому слайдеру, но не подходит к внутренним. Ну там по id его, или может у него еще какие-то классыл кроме .slider есть.