<div class="main-content">
<!-- additional wrapper for the slider -->
<div class="my-swipe-wrapper">
<!-- normal slider here -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="my-slide-content">Slide 1</div>
</div>
<div class="swiper-slide">
<div class="my-slide-content">Slide 2</div>
</div>
<div class="swiper-slide">
<div class="my-slide-content">Slide 3</div>
</div>
<div class="swiper-slide">
<div class="my-slide-content">Slide 4</div>
</div>
<div class="swiper-slide">
<div class="my-slide-content">Slide 5</div>
</div>
<div class="swiper-slide">
<div class="my-slide-content">Slide 6</div>
</div>
<div class="swiper-slide">
<div class="my-slide-content">Slide 7</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>/* styles to override swiper */
.swiper-container {
/* change container to overflow visible */
overflow: visible;
/* add enough padding to account for the shadow */
padding: 5px;
}
.my-swipe-wrapper {
/* add the overflow to the outer wrapper */
overflow: hidden;
/* add negative margin to counteract the padding */
margin: -5px;
}
/* style for the demo, not important for the outcome */
.main-content {
max-width:480px;
margin:0 auto;
}
.my-slide-content {
box-shadow: 0 0 5px;
background: #aaaaaa;
padding: 20px;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
//direction: 'horizontal',
//loop: true,
slidesPerView: 1,
spaceBetween: 20,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})