EasysLider 1.7 Ajuda - Todo o conteúdo exibido na página Carregar

Question

Ao implementar o Slider Easy Slider 1.7 com jQuery em uma página minha, acho que quando a página é carregada primeiro, ambas as imagens no ul exibição deslizante e, em seguida, o deslizador carrega corretamente e apenas o primeiro slide é exibido.

Qual é a melhor maneira de corrigir isso para que o controle deslizante div não é exibido até que o script esteja carregado corretamente? Estou usando este código para executá -lo:

$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        pause: 10000
    });
});

Answer 1

Você pode apenas ocultar o conteúdo via CSS, assim:

#slider { display: none; }

Em seguida, mostre -o no carregamento da página também:

$(document).ready(function(){
  $("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});

Para estar seguro, eu adicionaria um bloco à página para usuários que não são do JS, poderia ser uma folha de estilo dentro se você tiver muitas delas, caso contrário, apenas uma tag de estilo:

<noscript><style type="text/css">#slider { display: block; }</style></noscript>

Answer 2

Adicionei o código abaixo ao meu CSS para ocultar as imagens de serem empilhadas.

/*Added to hide stacking of images on IE 7/8*/
#slider{
  height:227px;
  overflow:hidden;
}