BXSLIDER: Stop Flash of Unstyled Content (BXSLIDER)

Important Notice: This information is for internal reference only. Use at your own risk.

Does Google actually understand your Miva Merchant store? Our JSON-LD schema generator makes sure it does. Contact us to get started. (more info)

Scot Ranney • December 22, 2023

Want to really fix this? Use swiper.js - see two knowledge base articles.

Display none the slider element. Set a min height/width on container so DOM doesn't change.

<div class="mySlider" style="display:none">...</div>

Jquery:

$(document).ready(function(){
	$('.mySlider').show().bxSlider({
		slideWidth: 160,
		minSlides: 2,
		maxSlides: 5,
		preloadImages: 'all'
	});
});

https://www.scotsscripts.com/mvblog/css-stop-flash-of-unstyled-content-bxslider.html