在容器外显示 Swiper 滑块答案

【问题标题】：Show Swiper slider out of container在容器外显示 Swiper 滑块
【发布时间】：2021-06-23 16:52:04
【问题描述】：

滑块滑出容器。

我不想为容器使用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

【问题讨论】：

标签： swiper swiperjs

【解决方案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 无法正常工作

【讨论】：