Ускорить slick slider

510
16 мая 2017, 01:47

Есть такая проблема: при загрузке страницы, блоки slick slider отображаются друг под другом и только после полной загрузки выстраиваются как положено.

Занимает все не более секунды, но вопрос: как устранить данную проблему?

$(document).ready(function(){   
 
$('.slider').slick({ 
  slidesToShow: 2, 
  slidesToScroll: 1, 
  arrows: true, 
  dots: false, 
  infinite: true, 
  centerMode: false, 
}); 
 
});
img { 
  max-width: 100%; 
  width: auto; 
} 
 
.slick-slide { 
  padding: 10px; 
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
   
  <div class="slider"> 
    <div> 
      <img src="https://dummyimage.com/200x100/000/fff" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/200x100/000/fff" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/200x100/000/fff" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/200x100/000/fff" alt=""> 
    </div> 
  </div>

P.S: Задавать фиксированную высоту слайдеру и overflow: hidden (чтобы скрыть косяк) не вариант.

READ ALSO
Не работает form multiple на Android

Не работает form multiple на Android

Заметил интересный баг, на Android не работает множественный выбор в <input type="file" name="file[]" accept="image/*" multiple="true"> причем только с включенным атрибутом...

315
Портфолио для FCC

Портфолио для FCC

Codepen: https://codepenio/Tvarinskyy/pen/PmaqQr

297
Проблема с кликами в js

Проблема с кликами в js

Есть простой код:

302
Рандом в Html Сайте

Рандом в Html Сайте

Как вставить генератор рандомных чисел в HTML сайт, созданный через Блокнот иначе говоря: есть ли какие-не будь теги для Рандома?

755