Slick Slider on bigger screen sizes and dynamic resizing in between

Question

I am using Slick Slider on my Wordpress Theme and want it work as follows.
For any screen < 700px, do not use Slick Slider, but show the single images as block elements.
For any screen > 700px, start using Slick Slider with a single Slide.
For any screen > 1080px use two slides.
When resizing the browser window this transformation should work automatically.

The code below does work, however when i navigate to a different page on my < 700px screen size, a slider with a single slide will appear. I then need to refresh the page to make all the images appear as single images. What also works, if i slightly reisze my browser window, since this seems to trigger it to get rid of the slider.

I am tryig to use the "no slider" state as my default, while any screen > 700px should get a slider, automatically, meaning i can resize my browser window in any direction and it will always be the right view option.

// SLICK SLIDER
$window = jQuery(window);
$slick_slider = jQuery('.slider');

const sliderCount = $slick_slider.children().length;

if (sliderCount > 2) { //========================================================================================= START IF
    settings = {
        infinite: true,
        mobileFirst: true,
        vertical: false,
        fade: false,
        autoplay: false,
        speed: 600,
        dots: false,
        arrows: true,
        pauseOnHover: true,
        slidesPerRow: 1,
        slidesToShow: 1,
        slidesToScroll: 1,
        adaptiveHeight: false,
        responsive: [
            {

                // breakpoint: 700,
                // settings: "unslick",
                breakpoint: 1081,
                settings: {
                    slidesToShow: 2
                },

            }
        ],
    };

    $slick_slider.slick(settings);


    // Slider Resize

    $window.on('resize', function () {
        if (window.matchMedia("(orientation: portrait) and (max-width: 700px)").matches) {
            if ($slick_slider.hasClass('slick-initialized'))
                $slick_slider.slick('unslick');
            jQuery('.counter').addClass('hide');
            return
        }
        if (!$slick_slider.hasClass('slick-initialized'))
            return $slick_slider.slick(settings);
        jQuery('.counter').removeClass('hide');
    });


    // Function to update the cursor based on the number of images
    function updateCursor() {
        var numImages = jQuery('.slider .slick-slide').length;
        if (numImages > 1) {
            jQuery('.slider').on('mousemove', function (e) {
                var pWidth = jQuery(this).innerWidth();
                var arrowWidth = 80;
                var arrowHeight = 80;
                var pOffset = jQuery(this).offset();
                var x = e.pageX - pOffset.left - arrowWidth / 2;
                var y = e.pageY - pOffset.top - arrowHeight / 2;

                if (pWidth / 2 > x) {
                    jQuery('.slick-slide').css('cursor', 'url(http://localhost:10004/wp-content/uploads/2024/05/arrow-l.png) ' + x + ' ' + y + ', pointer');
                } else if (pWidth / 2 < x) {
                    jQuery('.slick-slide').css('cursor', 'url(http://localhost:10004/wp-content/uploads/2024/05/arrow-r.png) ' + x + ' ' + y + ', pointer');
                }
            });
        } else {
            jQuery('.slick-slide').css('cursor', 'default');
            jQuery('.slider').off('mousemove');
        }
    }

    updateCursor();

    // Listen for slide change event and update the cursor accordingly
    jQuery('.slider').on('afterChange', function (event, slick, currentSlide) {
        updateCursor();
    });

    jQuery('.slider').click(function (e) {
        var pWidth = jQuery(this).innerWidth();
        var pOffset = jQuery(this).offset();
        var x = e.pageX - pOffset.left;

        if (pWidth / 2 > x) {
            $slick_slider.slick('slickPrev');
        } else if (pWidth / 2 < x) {
            $slick_slider.slick('slickNext');
        }
    });


    //Counter

    var currentSlideIndex = jQuery('.slider').slick('slickCurrentSlide') + 1;
    var slideCount = jQuery('.slider').slick('getSlick').slideCount;
    updateCounter(currentSlideIndex, slideCount);

    jQuery('.slider').on('afterChange', function (event, slick, currentSlide) {
        updateCounter(currentSlide + 1, slick.slideCount);
    });

    function updateCounter(currentIndex, totalSlides) {
        jQuery('.counter').text(currentIndex + '/' + totalSlides);
    };

} // ========================================================================================= END IF