I made this slider using swiper, so the current slide should always look bigger than the rest, and be centered. Also the 10px margin between slides shold be kept. But after running my code, the slides position after change, always lool unstable. What should I do to fix it?

Here is my code...

new Swiper(".swiper", {
  speed: 1000,
  loop: true,
  centeredSlides: true,
  slidesPerView: "auto",
  spaceBetween: 10,
  loopedSlides: 5,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

body {
   background: gray;
   padding: 50px 0;
}
.slider-area {
   width: 100%;
   margin: auto;
   background: gray;
}
.slider-area .swiper .swiper-wrapper {
   align-items: center;
   height: 560px;
}
.slider-area .swiper .swiper-slide {
   width: auto;
   height: 440px;
   will-change: height;
   transition-property: height;
   transition-duration: 1s;
}
.slider-area .swiper .swiper-slide.swiper-slide-duplicate-active,
.slider-area .swiper .swiper-slide.swiper-slide-active {
   height: 560px;
}
.slider-area .swiper .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
}

<link rel="stylesheet" href=".4.7/swiper-bundle.css"/>
<script src=".4.7/swiper-bundle.min.js"></script>

<section class="slider-area">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src=".png" alt="">
      </div>
      <div class="swiper-slide">
        <img src=".png" alt="">
      </div>
      <div class="swiper-slide">
        <img src=".png" alt="">
      </div>
      <div class="swiper-slide">
        <img src=".png" alt="">
      </div>
      <div class="swiper-slide">
        <img src=".png" alt="">
      </div>
      <div class="swiper-slide">
        <img src=".png" alt="">
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>

I made this slider using swiper, so the current slide should always look bigger than the rest, and be centered. Also the 10px margin between slides shold be kept. But after running my code, the slides position after change, always lool unstable. What should I do to fix it?

Here is my code...

new Swiper(".swiper", {
  speed: 1000,
  loop: true,
  centeredSlides: true,
  slidesPerView: "auto",
  spaceBetween: 10,
  loopedSlides: 5,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

body {
   background: gray;
   padding: 50px 0;
}
.slider-area {
   width: 100%;
   margin: auto;
   background: gray;
}
.slider-area .swiper .swiper-wrapper {
   align-items: center;
   height: 560px;
}
.slider-area .swiper .swiper-slide {
   width: auto;
   height: 440px;
   will-change: height;
   transition-property: height;
   transition-duration: 1s;
}
.slider-area .swiper .swiper-slide.swiper-slide-duplicate-active,
.slider-area .swiper .swiper-slide.swiper-slide-active {
   height: 560px;
}
.slider-area .swiper .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/Swiper/8.4.7/swiper-bundle.css"/>
<script src="https://cdnjs.cloudflare/ajax/libs/Swiper/8.4.7/swiper-bundle.min.js"></script>

<section class="slider-area">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://placehold.jp/400x560.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/400x560.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/400x560.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/400x560.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/400x560.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/400x560.png" alt="">
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>

https://codepen.io/alive_coders/pen/bNbRPLE

• javascript
• css
• animation
• swiper.js

• I've moved your codepen to a Stack Snippet, this way users don't have to go off-site. Feel free to edit if anything is wrong. – StackByMe Commented Mar 7 at 10:33

1 Answer 1

Expected behavior: centeredSlides - do not take in consideration change of width/height of active slide by custom CSS (So it could cause issues + overflow issues).

You can remove this to center (But you get a little buggy transition):

.slider-area .swiper .swiper-wrapper {
   align-items: center;
   /*height: 560px;*/ // remove this
}

One "famous" solution: set active-slide size to 1, and inactive to 0.9 for example. Example: https://codepen.io/adityarahmanda/pen/zYjrEyd