Initialiser ou détruire owlCarousel selon la taille de l’écran

Javascript, jQuery, OwlCarousel, Responsive

Lors d’une intégration responsive, on peut vouloir instancier un slider owlCarousel uniquement lorsque l’écran est plus (ou moins) large qu’une certaine valeur. La difficulté est qu’il faut détruire l’instance du slider si la condition de taille n’est plus respectée.

Pour cela, on va utiliser une variable globale booléenne, qui nous servira à savoir si le carrousel est créé ou non, pour l »instancier s’il le faut, et le détruire sinon.

var kodexSliderBool = false;
var $kodexSlider    = $('#kodex');
var widthLimit      = 690;

var initKodexSlider = function(){
	if( $(window).width()<=widthLimit && !kodexSliderBool ){
		// si le slider n'est pas instancié, mais qu'il doit l'être
		$kodexSlider.owlCarousel({
			items     : 1,
			loop      : false,
			dots      : false,
			nav       : false
		});
		kodexSliderBool = true;

	}else if( $(window).width()>widthLimit && kodexSliderBool ){
		// si le slider est instancié et qu'il ne doit pas l'être
		$kodexSlider.trigger('destroy.owl.carousel');
		$kodexSlider.removeClass('owl-carousel owl-loaded');
		$kodexSlider.find('.owl-stage-outer').children().unwrap();
		kodexSliderBool = false;
	}
}

// on lance la fonction une première fois, puis à chaque redimensionnement de la page
initKodexSlider();
$(window).resize(initKodexSlider);

var kodexSliderBool = false;

var $kodexSlider = $('#kodex');

var widthLimit = 690;

var initKodexSlider = function(){

if( $(window).width()<=widthLimit && !kodexSliderBool ){

// si le slider n'est pas instancié, mais qu'il doit l'être

$kodexSlider.owlCarousel({

items : 1,

loop : false,

dots : false,

nav : false

});

kodexSliderBool = true;

}else if( $(window).width()>widthLimit && kodexSliderBool ){

// si le slider est instancié et qu'il ne doit pas l'être

$kodexSlider.trigger('destroy.owl.carousel');

$kodexSlider.removeClass('owl-carousel owl-loaded');

$kodexSlider.find('.owl-stage-outer').children().unwrap();

kodexSliderBool = false;

}

// on lance la fonction une première fois, puis à chaque redimensionnement de la page

initKodexSlider();

$(window).resize(initKodexSlider);

Cet exemple instanciera owlCarousel si la largeur de la fenêtre n’excède pas 690px.