Slick滑块循环切换至起始页时出现闪烁问题求助

我在使用Slick滑块时遇到以下问题：滑块包含6张幻灯片，从第6张切换回第1张时会出现闪烁现象。移除相关CSS后闪烁消失，但幻灯片的缩放效果也随之丢失，需要在保留缩放效果的前提下修复闪烁问题。

使用的库文件 #

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="Scripts/jquery-3.6.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/plugins.js"></script>

HTML结构 #

<div id="screenshot-area" class="screenshot-area bg-white section-padding">
    <div class="container">
        <div class="row">
            <!-- Section Title -->
            <div class="section-title text-center col-xs-12">
                <h4>SCREENSHOT</h4>
                <span class="borderbottomblue"></span>
                <p>
                    
                </p>
            </div>
            <!-- Screen Shot Slider -->
            <div class="col-xs-12">
                <div class="screenshot-slider">
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_1.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_2.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_3.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_4.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_5.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_1.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                </div>
            </div>
        </div>
    </div>
</div>

JS配置 #

$('.screenshot-slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    focusOnSelect: true,
    centerPadding: '228px',
    responsive: [
      {
          breakpoint: 1250,
          settings: {
              arrows: false,
              centerPadding: '230px',
          }
      },
      {
          breakpoint: 1200,
          settings: {
              arrows: false,
              centerPadding: '175px',
          }
      },
      {
          breakpoint: 992,
          settings: {
              arrows: false,
              centerPadding: '0px',
              slidesToShow: 3,
          }
      },
      {
          breakpoint: 769,
          settings: {
              arrows: false,
              centerPadding: '0px',
              dots: true,
              slidesToShow: 3,
          }
      },
      {
          breakpoint: 768,
          settings: {
              arrows: false,
              centerPadding: '0px',
              dots: true,
              slidesToShow: 2,
          }
      },
      {
          breakpoint: 480,
          settings: {
              arrows: false,
              centerPadding: '0px',
              dots: true,
              slidesToShow: 1,
          }
      },
    ]
});

问题相关CSS（移除后闪烁消失但丢失缩放效果） #

.screenshot-area{}
.screenshot-slider {}
.screenshot-slider .slick-list {
  padding-bottom: 60px !important;
  padding-top: 60px !important;
}
.single-screen {
  z-index: 1;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.single-screen.slick-active {
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
  z-index: 2;
}
.single-screen.slick-center {
  position: relative;
  -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
          transform: scale(1.3);
  z-index: 3;
}
.single-screen img {
  width: 100%;
}

修复方案 #

闪烁的核心原因是循环切换时，幻灯片的slick-active/slick-center类切换导致的过渡冲突——切换瞬间旧的样式类被移除，新的样式类还未完全应用，导致幻灯片瞬间回到原始尺寸再缩放，产生闪烁。可以通过以下CSS优化解决：

1. 精准控制过渡属性，避免不必要的过渡触发 #

将.single-screen的过渡从all改为仅针对transform，同时延迟z-index的变化，确保缩放过渡完成后再调整层级：

.single-screen {
  z-index: 1;
  -webkit-transition: transform 0.3s ease 0s, z-index 0s linear 0.3s;
  transition: transform 0.3s ease 0s, z-index 0s linear 0.3s;
}

2. 给克隆幻灯片应用相同样式 #

Slick循环模式会生成克隆幻灯片（带slick-cloned类），之前的CSS未覆盖这类元素，切换时克隆元素的样式缺失会导致闪烁，补充以下样式：

.single-screen.slick-active,
.single-screen.slick-cloned.slick-active {
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
  z-index: 2;
}
.single-screen.slick-center,
.single-screen.slick-cloned.slick-center {
  position: relative;
  -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
          transform: scale(1.3);
  z-index: 3;
}

3. 优化滑块渲染性能 #

给滑块容器添加3D渲染属性，提升浏览器对变换动画的处理效率：

.screenshot-slider {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

将以上修改替换原有的CSS部分，即可在保留缩放效果的同时解决循环切换的闪烁问题。

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