Почему слайды в Swiper сдвигаются вправо?

Question

Всем привет!

Столкнулся со странным багом в Swiper. При загрузке страницы все отображается, как должно. На втором круге перед слайды смещаются на несколько пикселей вправо, а перед .title появляются три точки (на третьем и следующих проходах точки исчезают, но смещение слайдов вправо остается).

Может быть, кто-нибудь сталкивался с подобным и может подсказать в чем проблема?

Заранее всем спасибо!

    <!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <title>Document</title>
  
  <style>
  .swiper-container {
    width: 300px;
    height: 100%;
    overflow: hidden;
}
.title {
    margin-top: 0px;
}
.swiper-slide {
    width: 300px;
    /* Ширина слайда */
}
.swiper-slide img {
    width: 100%;
}
.testimonial {
    flex: 1;
    height: 100%;
    text-align: right;
}
.swiper-wrapper, .swiper-slide {
    margin: 0;
    padding: 0;
}
</style>
  
</head>

<body>
 
      <div class="swiper-container">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
              <div class="title" data-swiper-parallax="-100" data-swiper-parallax-duration="200">Slide 1</div>
              <!-- Parallax subtitle -->
              <div class="subtitle" data-swiper-parallax="-200" data-swiper-parallax-duration="400">Subtitle</div>
              <!-- And parallax text with custom transition duration -->
              <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
                <p>Lorem ipsum dolor sit amet</p>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="title" data-swiper-parallax="-100" data-swiper-parallax-duration="200">Slide 2</div>
              <!-- Parallax subtitle -->
              <div class="subtitle" data-swiper-parallax="-200" data-swiper-parallax-duration="400">Subtitle</div>
              <!-- And parallax text with custom transition duration -->
              <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
                <p>Lorem ipsum dolor sit amet</p>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="assets/img/bracelette.png" alt="">
            </div>
            ...
          </div>
        </div>
        <div class="testimonial">
          iorngihreignri9g ubrgrei ugrehngjbhighn jrhginr
        </div>
     
   
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

 <script>
  
  const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  slidesPerView: 1,
  spaceBetween: 40,

  autoplay: {
    delay: 1500,
  },

});
  
  </script>

</body>

</html>

Код на JS Fidle

БЛОГ НА HUSL

Почему слайды в Swiper сдвигаются вправо?

Ответы (0 шт):