How to load and unload a slider script when screen size changes?

Question

I am using a responsive slider from http://sachinchoolur.github.io/lightslider/ , which implemented the JS, and some CSS. Works great!

My Problem: I have 3 Content-Boxes which show as normal boxes when above 1024px screen width - next to each other. So far so good...

I only want to launch the slider script when the screen size is mobile, below 1024px, and unload it when the screen is resized bigger. But it launches always and I'm also stuck at unloading the script when the screen size changes...

I've attempted several things, but can't achieve that. My JS is not the best tbh...

My current script is the following:

<script>
jQuery(document).ready(function() {
                    jQuery("#content-slider").lightSlider({
                            loop:true,
                            keyPress:true,
                            item: 1,
                            enableTouch:true,
                            enableDrag:true,
                            freeMove:true,
                            swipeThreshold: 40, 
                            onSliderLoad: function ($el) {
                                jQuery(window).on('load', function () {
                                        var windowSize = jQuery(window).width();
                                        if(windowSize <= 1024){     
                                            console.log("kleiner 1024");
                                        } else if (windowSize > 1024) { 
                                            console.log("größer 1024");                                     
                                            $el.lightSlider = null;
                                            return false;
                                        }
                                });
                                jQuery(window).on('resize', function () {
                                        var windowSize = jQuery(window).width();
                                        if(windowSize <= 1024){     
                                            console.log("kleiner 1024");
                                        } else if (windowSize > 1024) { 
                                            console.log("größer 1024");                                     
                                            $el.lightSlider = null;
                                            return false;
                                        }
                                });                             
                        }
                    });     
}); 
    </script>

The slider has several options to set, shown here in the "Play with settings" section. I thought it would be wise to use the "onSliderLoad" function and check then for screen size. In my script the line with "$el.lightSlider = null;" - i've tried unload, destroy, false, and so on, but i can't get rid of the slider when the screen size changes... not sure if that's even possible meanwhile...

Slider options like mentioned here:

        onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {}

Also it seems the load-event is not being triggered, as i don't see my console.log...

Would appreciate any help! Thx & best regards

Answer 1

You can't unload scripts

When a script is loaded/executed, the function definitions are added to the global window object. Unless you assign to a variable then delete it.

Also, if the responsiveness is your problem, there is another solution: You can set multiple layouts. You can add as many breakpoints as you want.

 $('#responsive').lightSlider({
        item:4,
        loop:false,
        slideMove:2,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [
            {
                breakpoint:800,
                settings: {
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                  }
            },
            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                  }
            }
        ]
    });  

Answer 2

Doesn't look like there is a built in method for doing that, but you can wrap it in a little class that just manually puts it back the way it originally is. Here, play with these buttons for an example.

 class LSWrapper { constructor() { this.markup = $('#lightSlider').parent().html(); this.isInit = false; } init() { if (this.isInit) return false; this.isInit = true; $('#lightSlider').lightSlider({ gallery: true, item: 1, loop: true, slideMargin: 0, thumbItem: 9 }); } destroy() { if (!this.isInit) return false; this.isInit = false; $('#lightSlider').parent().html(this.markup); $(".lSGallery").remove(); } } var slideshow = new LSWrapper(); document.getElementById('init').onclick = () => slideshow.init(); document.getElementById('destroy').onclick = () => slideshow.destroy();

 .demo { width: 420px; } ul { list-style: none outside none; padding-left: 0; margin-bottom: 0; } li { display: block; float: left; margin-right: 6px; cursor: pointer; } img { display: block; height: auto; max-width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" /> <button id=init>Create</button> <button id=destroy>Destroy</button> <div class="demo"> <ul id="lightSlider"> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" /> </li> <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" /> </li> </ul> </div>