Не корректно отображается первый слайд в модальном окне?

Question

[Вадим Ягофаров]

Не корректно отображается первый слайд в модальном окне, после пролистывания все ок. Раньше с такими глюками не встречался. galkam.ru/pamatniki/mramornyie.html

Answer 1

[lloydbanks]

после пролистывания все ок

Потому что находясь в скрытом элементе его изначальная ширина неизвестна. А такие события как пролистывание, изменение окна браузера и проч. перестраивают состояние слайдера.
Поэтому, все слайдеры в модальном окне инициализируйте после его открытия, а не на document.ready

Comments

[Вадим Ягофаров]

а как это правильно сделать?
я сделал так и не работает

$('.modal').show();  
   $('.work__slider').slick({
    centerMode: false,
    slidesToShow: 4,
    arrows: true,
    prevArrow: '<button class="slick-prev slick-arrow" aria-label="Prev" type="button" style=""><i class="fa fa-chevron-left" aria-hidden="true"></i></button>',
    nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><i class="fa fa-chevron-right" aria-hidden="true"></i></button>',
    responsive: [
      {
        breakpoint: 992,
        settings: {
          arrows: true,
          centerMode: true,
          slidesToShow: 3
        }
      },
      
      {
        breakpoint: 750,
        settings: {
          arrows: false,
          centerMode: true,
          slidesToShow: 2
        }
      },
      {
        breakpoint: 600,
        settings: {
          arrows: false,
          centerMode: true,
          slidesToShow: 1
        }
      }
    ]
  });
$('.modal').hide()

[lloydbanks]

Вадим Ягофаров,

$('.modal').show(500, function() {
  // здесь код слайдера...
  $('.work__slider').slick({...
});