Slick js мелькают слайды.

140
19 февраля 2018, 04:30

Инициализирую слайдер вот так:

mainSlider.slick({ 
    autoplay: mainSlider.data("autoplay"), 
    autoplaySpeed: Number(mainSlider.data("autoplay-speed")), 
    prevArrow: '<div class="main-slider__arrow main-slider__arrow_revers main-slider__arrow_prev"></div>', 
    nextArrow: '<div class="main-slider__arrow main-slider__arrow_next"></div>', 
    dots: true, 
    infinite: false, 
    dotsClass: 'main-slider-dots', 
    customPaging: function(slider, i) { 
      return '<div class="main-slider-dots__dot"></div>'; 
    }, 
    responsive: [{ 
      breakpoint: 922, 
      settings: { 
        arrows: false 
      } 
    }] 
  });

При загрузке страницы вижу сначала колонку всех картинок (слайдов), а через секунду это всё собирается в слайдер. Как убрать данный эффект?

Answer 1

Суть в том, что у вас сначала загружаются картинки, а потом это всё по средствам js оборачивается в слайдер. Т.е. от момента загрузки до инициализации слайдера, у вас в любом случае будут картинки. Вот как один из вариантов - сделать блоку opacity: 0, а по инициализации возвращать opacity: 1

.slider { opacity: 0 }
mainSlider.on('init', function(slick){
  mainSlider.css('opacity', 1);
});
READ ALSO
Новое окно из инпута javascript
javascript

Новое окно из инпута javascript

здравствуйте дорогие мои друзьяОчередной вопрос из серии "брутальное извращение"

 203
Валидация в форме имени, фамилии и возраста
javascript

Валидация в форме имени, фамилии и возраста

Есть форма валидацииИмя и фамилия должны быть без пробелов, с большой буквы и минимум две буквы, а для возраста задать интервал от 18 до 100

 185
Сохранение значения из input
javascript

Сохранение значения из input

Суть очень простаНеобходимо было создать checkbox для каждой строки таблицы, связать его с количеством товара и вывести общую цену всех товаров...

 157
Как сделать вечную привязку (snap) в Inkscape?
javascript

Как сделать вечную привязку (snap) в Inkscape?

 131