CODEWITHSUNDEEP
javascriptcssanimationswiper.js
Fernando Souza
Fernando Souza

Reputation: 1781

Swiper wont be centered

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.com/ajax/libs/Swiper/8.4.7/swiper-bundle.css"/>
<script src="https://cdnjs.cloudflare.com/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

Upvotes: 0

Views: 26

Answers (0)

Related Questions