How to turn off the slider when the width and height decrease?

Question

JavaScript

I have a vertical slider on my page. Each slide is 100vh high and scrolls one slide at a time.

<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>

But when reducing the height or width, I disable slick js so that the slides scroll like a normal page (block under block):

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

The problem is that some .slider-children slides have their own horizontal slides:

<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>

and they are also turned off when the script is triggered. What to do so that the slides in the middle of .slider-children are not disabled?

Answer 1

Instead , write a selector that only fits the big slider, but doesn't fit the inner ones. Well, there by its id, or maybe it has some other classes besides .slider. $(".slider").slick("unslick");