Slick Gallery首张图片引发页面布局异常问题求助

我的Slick Gallery包含6张图片，首张图片存在偏移，会导致页面布局变化；从第1张切换至第2张时布局会改变，但第2至6张图片切换时布局保持稳定。已尝试调整CSS和JS代码，问题仍未解决。本人是前端新手，若需要更多信息请告知。

现有代码 #

CSS代码 #

.slick-slider-container {
    position: relative;
    overflow: visible; 
    height: auto;
    z-index: 10;
}

.slick-container, .paragraph-container {
    display: block;
    width: 100%;
    position: relative;
    overflow: visible; 
}

.slick-container img {
    width: 100%;
    height: auto;  
    max-height: 200px;
    min-height: 200px;
    transition: transform 0.5s;
    object-fit: contain;  
}

.some-wrapper {
    overflow: visible;
}

HTML代码 #

<div class="slick-container">
    <div class="mySlides">
        <div class="numbertext"> 1 / 7 </div>
        <img src="/media/slideshow gallery/ffxiv_dx11_2023-08-25_20-20-27.png" alt="">
        <span class="closeSlide" onclick="closeGallery()">X</span>
    </div>
    <div class="mySlides">
        <div class="numbertext"> 2 / 7 </div>
        <img src="/media/slideshow gallery/ffxiv_dx11_2023-08-25_20-33-26.png" alt="">
        <span class="closeSlide" onclick="closeGallery()">X</span>
    </div>
    <div class="mySlides">
        <div class="numbertext"> 3 / 7 </div>
        <img src="/media/slideshow gallery/ffxiv_dx11_2023-08-25_20-24-18.png" alt="">
        <span class="closeSlide" onclick="closeGallery()">X</span>
    </div>
    <div class="mySlides">
        <div class="numbertext"> 4 / 7 </div>
        <img src="/media/slideshow gallery/ffxiv_dx11_2023-08-25_20-18-20.png" alt="">
        <span class="closeSlide" onclick="closeGallery()">X</span>
    </div>
    <div class="mySlides">
        <div class="numbertext"> 5 / 7 </div>
        <img src="/media/slideshow gallery/ffxiv_dx11_2023-08-25_20-22-16.png" alt="">
        <span class="closeSlide" onclick="closeGallery()">X</span>
    </div>
    <div class="mySlides">
        <div class="numbertext"> 6 / 7 </div>
        <img src="/media/slideshow gallery/ffxiv_dx11_2023-08-25_20-18-42.png" alt="">
        <span class="closeSlide" onclick="closeGallery()">X</span>
    </div>
</div>

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  // Initialize the Slick carousel
  $('.slick-container').slick({
      centerMode: true,
      centerPadding: '0px',
      infinite: true,
      adaptiveHeight: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      prevArrow: $('.prev'),
      nextArrow: $('.next')
  });
  
  $('.slick-container').on('click', function(e) {
    e.preventDefault();
  });

  // Add the enlarged class to the initial center slide
  $('.slick-container .slick-current').addClass('enlarged');

  // Handle beforeChange event
  $('.slick-container').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      // Remove the enlarged class from the current center slide
      $('.slick-container .slick-slide').removeClass('enlarged');
      // Add the enlarged class to the next center slide
      $(slick.$slides[nextSlide]).next().addClass('enlarged');
  });

  function closeGallery() {
      $('.slick-container').slick('unslick'); // Uninitialize slick when closing the gallery if needed
  }
});

修复方案 #

问题根源是centerMode初始化时的尺寸计算偏差，加上adaptiveHeight动态调整高度触发布局重排，按以下步骤修改：

1. 关闭自适应高度并固定容器尺寸
   把JS初始化配置里的adaptiveHeight: true改成false，同时给.slick-container设置固定高度（和图片的min/max-height一致），避免动态高度导致的布局跳动。

2. 修正幻灯片宽度和中心类的逻辑
   centerMode下首张幻灯片的宽度计算可能异常，给.slick-slide强制设置固定宽度；同时用Slick自带的slick-center类来标记中心幻灯片，替代原来的手动计算逻辑，避免初始化时的偏差。

3. 延后初始化时的类添加操作
   用setTimeout确保Slick完全初始化后再给中心幻灯片加样式，避免DOM未渲染完成导致的选择器失效。

修改后的代码 #

调整后的CSS

.slick-slider-container {
    position: relative;
    overflow: visible; 
    height: auto;
    z-index: 10;
}

.slick-container, .paragraph-container {
    display: block;
    width: 100%;
    position: relative;
    overflow: visible; 
    height: 200px; /* 和图片高度保持一致 */
}

.slick-container img {
    width: 100%;
    height: auto;  
    max-height: 200px;
    min-height: 200px;
    transition: transform 0.5s;
    object-fit: contain;  
}

.some-wrapper {
    overflow: visible;
}

.slick-slide {
    width: calc(100% / 3) !important; /* 适配slidesToShow:3的固定宽度 */
}

调整后的JS

document.addEventListener('DOMContentLoaded', function() {
  $('.slick-container').slick({
      centerMode: true,
      centerPadding: '0px',
      infinite: true,
      adaptiveHeight: false, // 关闭自适应高度
      slidesToShow: 3,
      slidesToScroll: 1,
      prevArrow: $('.prev'),
      nextArrow: $('.next')
  });
  
  $('.slick-container').on('click', function(e) {
    e.preventDefault();
  });

  // 等待Slick初始化完成后添加enlarged类
  setTimeout(() => {
    $('.slick-container .slick-center').addClass('enlarged');
  }, 0);

  // 幻灯片切换完成后更新enlarged类
  $('.slick-container').on('afterChange', function() {
      $('.slick-container .slick-slide').removeClass('enlarged');
      $('.slick-container .slick-center').addClass('enlarged');
  });

  function closeGallery() {
      $('.slick-container').slick('unslick');
  }
});

如果以上修改后仍有问题，建议检查图片是否在Slick初始化前已完全加载，可通过监听图片load事件后再初始化轮播，避免因图片尺寸未确定导致的计算错误。

内容的提问来源于stack exchange，提问作者BluBbiiPwns