<div class="mask">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">Slide 1</div>
			<div class="swiper-slide">Slide 2</div>
			<div class="swiper-slide">Slide 3</div>
			<div class="swiper-slide">Slide 4</div>
			<div class="swiper-slide">Slide 5</div>
			<div class="swiper-slide">Slide 6</div>
			<div class="swiper-slide">Slide 7</div>
			<div class="swiper-slide">Slide 8</div>
			<div class="swiper-slide">Slide 9</div>
			<div class="swiper-slide">Slide 10</div>
			<div class="swiper-slide">Slide 11</div>
			<div class="swiper-slide">Slide 12</div>
			<div class="swiper-slide">Slide 13</div>
			<div class="swiper-slide">Slide 14</div>
			<div class="swiper-slide">Slide 15</div>
			<div class="swiper-slide">Slide 16</div>
			<div class="swiper-slide">Slide 17</div>
			<div class="swiper-slide">Slide 18</div>
			<div class="swiper-slide">Slide 19</div>
			<div class="swiper-slide">Slide 20</div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
	</div>
</div>
    html, body {
      position: relative;
      height: 100%;
		overflow: hidden;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;

    }
    .swiper-container {
      width: 55%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      height: 100%;
/* 		opacity: 0.3; */

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
		 transition: .3s all;
		 transform: scale(0.8);
    }

.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
	transform: scale(0.9)
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
	transform: scale(1);
	opacity: 1;
}

.mask {
	width: 100%;
	height: 100%;
	-webkit-mask: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 1) 20%,
		rgba(0, 0, 0, 1) 80%,
		rgba(0, 0, 0, 0) 100%
	);
}
var swiper = new Swiper(".swiper-container", {
	slidesPerView: 3,
	loop: true,
	centeredSlides: true,
	spaceBetween: 30,
	pagination: {
		el: ".swiper-pagination",
		clickable: true
	}
});

External CSS

  1. https://unpkg.com/swiper@7.0.6/swiper-bundle.min.css

External JavaScript

  1. https://unpkg.com/swiper@7.0.6/swiper-bundle.min.js