Open close instance depending on viewport

[t-book]

Hi,

thanks for this great slider! I would need guidance with following. To save some space I'd like to open an instance on mobile

and close it on desktop

It would work to create two sliders, one initiated open the other closed, and hide the one or the other based on css media queries. Anyway, I think it would be nicer to only have one instance which changes depending on viewport resize. Here is a quick and dirty snippet which shows what I'm after:

   var instance;

    if ($(window).width() < 500){
        // initiate for small viewports closed
        instance = $('.image-gal-contain').Chocolat({
            container: '.image-gal-contain',
            loop: true,
        }).data('chocolat');
        instance.api().open();
        $('.image-gal-contain').addClass('image-gal-mobile');
    } else {
        // ... else open
        instance = $('.image-gal-contain').Chocolat({
            loop: true,
        }).data('chocolat');
        instance.api().close();
    }


    var resizeTimer;

    $(window).on('resize', function(e) {

      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {

        if ($(window).width() < 500){
            // on small vieports close the slider
            instance.destroy();
            instance = $('.image-gal-contain').Chocolat({
                container: '.image-gal-contain',
                loop: true,
            }).data('chocolat');
            instance.api().open();
            $('.image-gal-contain').addClass('image-gal-mobile');
        } else {
            // else open it
            instance.destroy();
            instance = $('.image-gal-contain').Chocolat({
                loop: true,
            }).data('chocolat');
            instance.api().close();
        }
                
      }, 400);

    });

The question is: Did someone did something similar before or is even something inbuild with chocolate? If not is it correct to destroy the instance or would you just call the constructor again?