在 Swiper Slider 中结束循环后幻灯片闪烁答案

【问题标题】：Slides flickering after end loop in Swiper Slider在 Swiper Slider 中结束循环后幻灯片闪烁
【发布时间】：2021-07-13 21:31:30
【问题描述】：

很长一段时间（几周、几个月），我尝试通过可见幻灯片中的不透明度来显示框。一切正常，但在滑动循环后的第一张和第二张幻灯片之间，我们可以看到所有幻灯片都在闪烁，我不知道如何解决这个问题。希望 .swiper-container 没有溢出：隐藏并显示所有可见的幻灯片。我搜索了整个互联网，并没有找到解决这个问题的方法。非常感谢您的帮助。

这是我的代码：

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="box">1</div>
    </div>
    <div class="swiper-slide">
      <div class="box">2</div>
    </div>
    <div class="swiper-slide">
      <div class="box">3</div>
    </div>
    <div class="swiper-slide">
      <div class="box">4</div>
    </div>
    <div class="swiper-slide">
      <div class="box">5</div>
    </div>
  </div>
</div>
  
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  
</body>
</html>

.box {
  background: green;
  height: 200px;
  opacity: 0;
  transition: all 0.2s ease;
}
.swiper-slide .box {
  opacity: 0;
}
.swiper-slide-visible .box {
  opacity: 1;
}

let slider;

$('.swiper-container').each(function(){

    slider = new Swiper($(this)[0], {
        slidesPerView: 3,
        spaceBetween: 50,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        watchOverflow: true,
        watchSlidesVisibility: true
    });

});

【问题讨论】：

我都试过了。将附加类添加到可见幻灯片并通过不透明度显示框，适用于事件 slideChangeTransitionStart、slideChangeTransitionEnd 等等。

标签： javascript html jquery css swiper

【解决方案1】：

将下面添加到 .swiper-slide 类或切换到纯 CSS 模式

-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0, 0, 0);

【讨论】：

cssMode: true 效果很差 -webkit-backface-visibility: hidden;不工作更多的问题是添加重复的幻灯片类
值得尝试将 -webkit-transform: translate3d(0, 0, 0); 添加到 swiper-slide 类
很遗憾这不是css的问题，而是在循环结束后添加swiper-slide-visible类。