Слайдер поздно загружается
Есть такой кусок кода, он отрабатывает, как надо, но есть одна проблема. Скрипт отрабатывает с задержкой( сайт большой и не оптимизированный ). Слайдер появляется на долю секунды в разобранном виде, т.е. Картинки показываются одна под другой. (5 картинок). Через секунду все работает нормально.
Добавил overflow: hidden;, но это не помогло.
<div class="slider single-item" style="overflow: hidden; padding-top:27px;" >
<!-- Slides Container -->
<div><a href="http://www.ololo.ru"><img class="banner" u="image" src="/banners/Emblem_1.jpg" /></a></div>
<div><a href="http://www.ololo.ru"><img class="banner" u="image" src="/banners/Emblem_2.jpg" /></a></div>
<div><a href="http://www.ololo.ru"><img class="banner" u="image" src="/banners/Emblem_3.jpg" /></a></div>
<div><a href="http://www.ololo.ru"><img class="banner" u="image" src="/banners/Emblem_4.jpg" /></a></div>
<div><a href="http://www.ololo.ru"><img class="banner" u="image" src="/banners/Emblem_5.jpg" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var parentWidth = ((document.documentElement.clientWidth)-$(".yashare-auto-init").width())-204;
$('.banner').css({'width':''+parentWidth+''});
$('.slider').css({'width':''+parentWidth+''});
$('.single-item').slick({
autoplay: true,
autoplaySpeed: 5000,
speed: 1000,
fade: true,
cssEase: 'linear'
});
});
$( window ).resize(function() {
var parentWidth = ((document.documentElement.clientWidth)-$(".yashare-auto-init").width())-204;
$('.banner').css({'width':''+parentWidth+''});
$('.slider').css({'width':''+parentWidth+''});
});
</script>