javascript - Swiper wont be centered - Stack Overflow

admin管理员组

文章数量:1410682

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

Share Improve this question Follow edited Mar 7 at 11:15 Fernando Souza asked Mar 7 at 9:34 Fernando SouzaFernando Souza 1,80111 gold badge2323 silver badges3737 bronze badges 1

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签： javascriptSwiper wont be centeredStack Overflow