[JavaScript] Swiper 사용법

오픈 API 인 Swiper를 사용하여 슬라이드 구현해보도록 하겠습니다. 

 

swiper를 사용하려면 여러 방법이 존재합니다.

저는 별도로 다운로드가 필요없는 cdn 방식을 추천 드립니다. 

1. cdn으로 사용하는 방식
2. 실제 swiper js파일을 swiper github에서 다운 받아 삽입하는 방식
3. npm으로 설치하여 사용하는 방식

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

Swiper 사이트 접속 후 Get Started 클릭 후 #Use Swiper from CDN에 적혀있는 CDN을 그대로 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>

HTML

	<!-- Slider main container -->
	<div class="swiper">
		<!-- Additional required wrapper -->
		<div class="swiper-wrapper">
			<!-- Slides -->
			<div class="swiper-slide"><img src="img/1.jpg" alt="image"></div>
			<div class="swiper-slide"><img src="img/2.jpg" alt="image"></div>
			<div class="swiper-slide"><img src="img/3.jpg" alt="image"></div>
			...
		</div>
		<!-- If we need pagination -->
		<div class="swiper-pagination"></div>

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

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

CSS

<style>
.swiper {
	width: 600px;
	height: 300px;
}
</style>

JS

<script type="text/javascript">
const swiper = new Swiper('.swiper', {
	  // Optional parameters
	  direction: 'vertical',
	  loop: true,

	  // If we need pagination
	  pagination: {
	    el: '.swiper-pagination',
	  },

	  // Navigation arrows
	  navigation: {
	    nextEl: '.swiper-button-next',
	    prevEl: '.swiper-button-prev',
	  },

	  // And if we need scrollbar
	  scrollbar: {
	    el: '.swiper-scrollbar',
	  },
	});
	</script>

---