Solved: iOSSlider jQuery plugin freezes browser if set to display:none

By  | 

My client is using this very cool jquery slider plugin, iOSSlider, for his site but I was having a browser freezing issue when he wanted me to set the slider’s style to display:none for mobile.

@media screen and (max-width: 479px){
	div#featured-wrapper.iosslider{
		display:none!important
	}
}

So for those who might stumble into similar case, as a workaround I have initialized the slider like the following:

function initHomeSlider() {
	jQuery(‘.iosslider:hidden’).iosSlider(‘autoSlidePause’);
	jQuery(‘.iosslider:visible’).iosSlider({
		snapToChildren: true,
		desktopClickDrag: true,
		infiniteSlider: true,
		snapSlideCenter: true,
		navNextSelector: jQuery(‘.next),
		navPrevSelector: jQuery(‘.prev),
		autoSlide: true,
		autoSlideTimer: 5000,
		autoSlideHoverPause: true
	});
	jQuery(‘.iosslider:visible’).iosSlider(‘autoSlidePlay’);
}
jQuery(document).ready(function($) {
	$(window).resize(function(){
		initHomeSlider();
	}).resize();
})

Hope that helps 🙂

Like Us On Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *