Open close instance depending on viewport
t-book opened this issue · 0 comments
t-book commented
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?