BXSLIDER: Stop Flash of Unstyled Content (BXSLIDER)

Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

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

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