Swiperjs 사용법

*필자는 javascript 가 아닌, 제이쿼리를 사용하였다.

• html 문서 head 부분에 아래 코드를 넣어야 한다.

  	```
  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.css">
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.js"></script>
  	```

• 여기서 팁 하나는, swiper의 css 와 script 가 아닌, 본인 커스텀 css 파일와 script 파일도 넣어야 한다면, 아래처럼 swiper의 css 파일보다 아래, swiper 의 script 파일보다 아래에 위치해주어야 한다. ====> 컴퓨터는 위에서 아래로 읽기 때문에 아래에 위치한 파일이 더 우선순위가 높다. 쉽게 설명하자면 아래에 위치한 파일로 덮어씌워지는 것이다. (필자는 보기 쉬우라고 css 파일과 script 파일을 줄간격을 주었다.)

  	```
  	// css 파일 
  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.css">
  	<link rel="stylesheet" href="./assets/css/style.css">
  
  	// script 파일
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.js"></script>
  	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <- 제이쿼리 CDN
  	<script src="./assets/js/main.js"></script>
  	```

2. 커스텀 script 파일 안에 즉시함수를 사용하여 swiper 코드를 작성한다. (즉시함수를 사용하지 않으려면 <script src="./assets/js/main.js" defer></script> 처럼 "defer" 라는 attribute 를 넣어야 한다. ===> 이렇게 하지 않으면, 컴퓨터는 위에서 아래로 읽기때문에, 마크업을 다 화면에 그리기도 전에 script 부터 실행하게 된다. 그렇기 때문에 "script 야~ 마크업이 다 그려질때까지 잠깐 기다렸다가 실행하렴~" 이란 뜻이다. )

3. html 문서에 스와이퍼를 적용시킨다.

   • 반드시 요소의 트리구조는 swiper 라는 classname 을 가진 block 요소의 바로 아래 자식요소로, swiper-wrapper 라는 classname 을 가진 block 요소가 있어야 하고, 그 바로 아래 자식요소로 swiper-slide 라는 block 요소가 있어야 한다.
   • control-area 이라는 classname 을 가진 요소는 swiper의 페이지네이션 기능과 네비게인션 기능을 적용시킬 요소들을 감싼것으로, 필자가 커스텀한것이다. (swiper의 자세한 페이지네이션과 네비게이션 적용법은 아래에서 설명하겠다)

   	<section class="section-visual">
       	<h2 class="blind">제품 슬라이드 비주얼</h2>
       	<div class="swiper">
         		<ul class="swiper-wrapper">
           		<li class="swiper-slide">
             			<a href="#">
               			<img src="./assets/images/visual_10.jpg" alt="제품 슬라이드 비주얼 이미지 첫번째">
             			</a>
           		</li>
           		<li class="swiper-slide">
             			<a href="#">
               			<img src="./assets/images/visual_10.jpg" alt="제품 슬라이드 비주얼 이미지 두번째">
             			</a>
           		</li>
           		<li class="swiper-slide">
             			<a href="#">
               			<img src="./assets/images/visual_10.jpg" alt="제품 슬라이드 비주얼 이미지 세번째">
             			</a>
           		</li>
         		</ul>
         		<div class="control-area">
             		<div class="pagination"></div>
             		<button class="btn btn-autoplay" aria-label="자동재생정지"></button>
             		<button class="btn btn-prev" aria-label="이전슬라이드"></button>
             		<button class="btn btn-next" aria-label="다음슬라이드"></button>
           	</div>
       	</div>
     	</section>

4. script 파일에 swiper 코드를 넣는다.

   • 아래 코드처럼 new 생성자 함수를 사용하여 Swiper 를 불러온 후, 스와이퍼를 적용시킬 요소(아래코드로 하자면 '.section-visual .swiper' 부분을 말한다)를 넣고, {} 안에 swiper 의 프로퍼티 들이나 메소드들을 넣어 커스텀한다.
   • 아래 코드에서는 visualSlide 라는 변수에 할당을 시켰지만, 해당 swiper 를 또 사용할 곳이 없다면 굳이 변수에 할당할 필요는 없다. (필자는 swiper 코드들을 보기 쉽게 구분하려고 변수에 할당시켰다. 변수에 할당시킨 그 값을 또 사용할곳이 없다하여도 변수에 할당해도 정상 작동한다.)
   • 아래 코드에 적힌 classname 들은 정해져 있는것이 아니다. 본인이 커스텀할수 있다.
   • 아래 코드의 뜻들은 대충 이렇다.
     • section-visual 이라는 classname 을 가진 요소의 자식요소로 swiper 라는 요소에 스와이퍼를 적용시키겠다.
     • 해당 스와이퍼는 무한반복(loop) 할것이며, 자동으로 슬라이드들을 넘기는것을 5초마다 재생시킬것이다. 라는 뜻이다.
     • 다음 슬라이드와 이전 슬라이드로 넘기는 navigation 기능을 적용시킬, 다음 슬라이드 버튼요소의 classname 은 btn-next 이고, 이전 버튼 슬라이드 버튼요소의 classname 은 btn-prev 이다.
     • 슬라이드들을 이동시킬수 있는(슬라이드 페이지 이동) pagination 기능을 적용시킬 요소의 classname 은 pagination 이며, 클릭이 가능하도록 하겠다.

	const visualSlide = new Swiper('.section-visual .swiper',{
      loop: true,
      autoplay:{
         delay: 5000,  
      	},
     navigation: {
      	nextEl: ".btn-next",
      	prevEl: ".btn-prev"
    	},
    pagination: {
      el: ".pagination",
      clickable: true
      },
 	})

*자세한 swiper 사용법은 공식문서를 참고하자.
https://swiperjs.com/get-started