Swiper JS Integration

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
     			Slide 1
		</div>
    		<div class="swiper-slide">
      			Slide 2
		</div>
	</div>
	<!-- .swiper-wrapper -->

	<!-- If we need pagination -->
	<div class="swiper-pagination"></div>

	<!-- If we need navigation buttons -->
	<div class="swiper-navigation-wrapper">
	  <div class="container">
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	  </div>
	</div>
</div>
<!-- .swiper -->

scripts.js

const swiper = new Swiper(".swiper", {
	// Optional parameters
	loop: true,
	slidesPerView: 1,
	effect: "fade",
	lazy: true,
  
	autoplay: {
	  delay: 3000,
	  disableOnInteraction: false,
	  pauseOnMouseEnter: true,
	},
  
	// If we need pagination
	pagination: {
	  el: ".swiper .swiper-pagination",
	  clickable: true,
	},
  
	// Navigation arrows
	navigation: {
	  nextEl: ".swiper .swiper-button-next",
	  prevEl: ".swiper .swiper-button-prev",
	},
  });
  

styles.css

.swiper {
	width: 100%;
	height: 100vh;
	.swiper-slide {
		position: relative;
	}

	.swiper-pagination {
		bottom: 51px;
		.swiper-pagination-bullet {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: transparent;
			border: 1px solid #fff;
			margin: 0 15px;
			&-active {
				background-color: #fff;
			}

			&:first-child {
				margin-left: 0;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}

	.swiper-navigation-wrapper {
		position: absolute;
		top: 160px;
		left: 0;
		width: 100%;
		.container {
			position: relative;
		}
		.swiper-button-next,
		.swiper-button-prev {
			width: 40px;
			height: 40px;
			opacity: 0.8;
			&::after {
				display: none;
			}

			&:hover {
				opacity: 1;
			}
		}
		.swiper-button-next {
			background: url(../../img/icons/arrow-right.svg) center center no-repeat;
			background-size: 100%;
			right: 15px;
		}
		.swiper-button-prev {
			background: url(../../img/icons/arrow-left.svg) center center no-repeat;
			background-size: 100%;
			left: auto;
			right: 65px;
		}
	}
}