CODEWITHSUNDEEP
javascripthtmljquerycssswiper.js
user11656141
user11656141

Reputation: 81

Slides flickering after end loop in Swiper Slider

For very long time (weeks, month) I tries to show boxes through opacity in visible slides. Everything works well but between 1nd and 2nd slides after swipes loop we can see flickering all slides and i don't know how fix that problem. want .swiper-container not to have overflow: hidden and show all slides visible. I searched the entire internet and found no solution to this problem. I would be very grateful for your help.

It's my code:

<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
    });

});

Upvotes: 4

Views: 8942

Answers (2)

Serhii Zhydetskyi
Serhii Zhydetskyi

Reputation: 174

I have similar issue, as I figured out it happens if big amount of images in the slider. I tried to change slider to keen-slider and it works the same (

Upvotes: 0

stefan999
stefan999

Reputation: 51

Add below to .swiper-slide class or switch to css only mode

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

Upvotes: 3

Related Questions