Show Swiper slider out of container

Question

The slider slides out of the container.

I do not want to use overflow: hidden for the container.

Here my code:

<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',
    },
});

Look this: image

Answer 1

You can try this solution:

const swiper = new Swiper(".swiper-container", {
  // Optional parameters
  loop: false,
  slidesPerView: "auto",
  spaceBetween: 30,

  breakpoints: {
    // when window width is >= 320px
    300: {
      slidesPerView: 1.5
    },
    // when window width is >= 480px
    600: {
      slidesPerView: 2.5
    },
    // when window width is >= 640px
    900: {
      slidesPerView: 3.5
    },
    1200: {
      slidesPerView: 4.5
    }
  }
});

.swiper-overflow-container {
  overflow-x: hidden;
}

.container {
  overflow: visible;
  outline: 2px solid red;
}

.swiper-container {
  overflow: visible;
}

.item {
  outline: 1px solid cyan;
}

.image {
  width: 100%;
  padding-bottom: 100%;
  background: #808080;
}

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

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

    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <div class="item">
            <div class="image"></div>
            <p>First</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item">
            <div class="image"></div>
            <p>Second</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item">
            <div class="image"></div>
            <p>Thrid</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item">
            <div class="image"></div>
            <p>Four</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item">
            <div class="image"></div>
            <p>Five</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item">
            <div class="image"></div>
            <p>Six</p>
          </div>
        </div>

      </div>

    </div>

  </div>
</div>

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 */
}

Limitations: not working properly with loop: true