Estou muito orgulhoso deste, mas gostaria de saber se existe uma maneira melhor.
Um problema que ocorre com muitos dos plug-ins de carrossel responsivos que usei recentemente é o empilhamento de conteúdo no carregamento da página. O conteúdo aparece brevemente antes que o plugin (neste caso específico, carouFredSel) calcule a altura ideal do contêiner com base na altura atual do slide.
Isso ocorre porque o plugin requer a altura do primeiro slide, para que possa ajustar a altura do contêiner de forma adequada.
Minha solução, para situações em que o conteúdo do slide é enquadrado por uma imagem, é aguardar a primeira das imagens carregar antes de inicializar o controle deslizante.
<div class="target-carousel" style="height: 0; overflow: hidden;">
// Carousel here
</div>
var sliderLoaded = false;
function loadSlider() {
if (sliderLoaded === true) {
return false;
}
sliderLoaded = true;
// Load slider here
};
$(window)
.on('load', function() {
var img = new Image();
img.onload = loadSliders;
img.src = $('.target-carousel li img').first().attr('src');
setTimeout(loadSliders, 2000);
});
Eu forneço um fallback de dois segundos para casos extremos em navegadores mais antigos onde o onload
evento não é disparado.
O exemplo usa window
o load
evento de porque esta é carouFredSel
a preferência de.