显示容器外的Swiper滑块

Question

滑块滑出容器。

我不想对容器使用overflow: hidden。

下面是我的代码：

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide a</div>
      <div class="swiper-slide">Slide b</div>
      <div class="swiper-slide">Slide c</div>
      <div class="swiper-slide">Slide d</div>
      <div class="swiper-slide">Slide e</div>
      <div class="swiper-slide">Slide f</div>
      <div class="swiper-slide">Slide g</div>
      <div class="swiper-slide">Slide h</div>
      <div class="swiper-slide">Slide i</div>
      <div class="swiper-slide">Slide j</div>
    </div>
    
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 5,
    spaceBetween: 9, 
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

看看这个：image

Answer 1

您可以尝试此解决方案：https://codepen.io/ArtZ91/pen/WNRYOXE

HTML：

<div class="swiper-overflow-container">
  <div class="container">

    <!-- swiper html here -->

  </div>
</div>

CSS：

.swiper-overflow-container {
    overflow-x: hidden; /* prevent horizontal scroll */
}

.swiper-overflow-container .container {
    overflow: visible; /* if your container has overflow by default */
}

.swiper-overflow-container .swiper-container {
    overflow: visible; /* remove swiper container overflow */
}

限制:不能正常使用loop: true