이번에도 슬라이드쇼 강좌야.
지난 번 까지 슬라이드쇼 강의를 내 딴에는 가장 쉽게 설명한다고 해 보았어.
그렇지만 기능이 부족해 실망한 사람, 또는 너무 어려워서 무슨 말인지 모르겠다는 학생들도 있을거야.

이 번 강좌는 바로 그런 분들을 위한 강좌야.
바로 전문가가 만들어 둔 코드를 그대로 가져다 쓰는 방법이야.
인터넷에서 검색하면 고수들이 만든 프로그램들이 분야 별로 정말 엄청 많아. 슬라이드쇼도 있고, 달력, 그래프, 차트, 데이터분석, 애니메이션..등등 생각할 수 있는 모든 기능들이 이미 다 있어.
이렇듯 특정 기능을 하는 함수들을 모아 둔 것을 '라이브러리(library)' 라고 불러.
특정 기능들만 제공하는 라이브러리도 있고, 여러가지 기능들을 다 모아 둔 라이브러리도 있어.
'라이브러리'가 원래는 도서관이라는 뜻이잖아.
도서관에서 필요한 책을 쏙 뽑아 읽듯이 자바스크립트도 마찬가지로 수많은 라이브러리 중에서 필요한 놈을 가져다 쓰면 돼.
그리고 유료도 가끔 있지만 대부분은 공짜야.

우리는 이 많은 라이브러리 중에서 슬라이드쇼만 전문으로 하는 한 라이브러리를 가져다 써 볼거야.

■ swiper

'스와이퍼'는 슬라이드쇼 관련 라이브러리 중에서 가장 유명한(?) 제품이야.
아니, 나만 그렇게 생각하는 지도 몰라. 슬라이딩 관련 라이브러리도 워낙 많으니..
어쨌든 라이브러리가 뭔가..를 알려 주기 위해 이 제품을 골라 보았어.
이 스와이퍼의 공식 홈페이지 주소는 아래야.

https://swiperjs.com

이곳에 가서 우선 데모 페이지를 확인해 봐.
얼마나 다양한 기능들이 있는지 깜작 놀랄거야... 데모는 아래 링크에서

https://swiperjs.com/demos

사용법도 아주 잘 되어 있어서 사실 이곳에서 별도로 설명할 필요가 없을것 같아.
그래도 영어가 좀 딸리는 분들을 위해 우리가 지금까지 배운 방식으로 한 번 만들어 보자구.

우선 이 swiper 는 외부 라이브러리이므로 여러분의 html 파일 head 부분에 아래 css 와 js 파일을 링크시켜 줘야해.
물론 이 파일들을 다운 받아 여러분의 서버에 저장한 뒤에 연결해 주어도 돼.
그렇지만 나는 아래와 같이 cdn 전문 사이트에서 링크하는 걸 더 좋아해.
그러면 내 서버의 트래픽을 조금이라도 아낄 수 있잖아..ㅎ

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

다음 내 html 의 body 에서 슬라이드를 보여 줄 자리에 아래와 같은 형식으로 자리를 잡아 줘.
이때 class 이름들은 반드시 아래와 같게 따라 줘야 해.

<!-- 슬라이더가 들어갈 메인 div -->
<div class="swiper">
  <!-- 그림들이 들어갈 div -->
  <div class="swiper-wrapper">
    <!-- 그림들 -->
    <div class="swiper-slide"><img src="roll1.jpg"></div>
    <div class="swiper-slide"><img src="roll2.jpg"></div>
    <div class="swiper-slide"><img src="roll3.jpg"></div>
  </div>
  <!-- 하단에 페이지목록이 필요하면 삽입 -->
  <div class="swiper-pagination"></div>

  <!-- 좌우에 다음/이전 버튼이 필요하면 삽입 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- 스크롤바가 필요하면 삽입 -->
  <div class="swiper-scrollbar"></div>
</div>

그리고 위 div 에 크기 같은 부가적인 설정이 필요하면 아래와 같이 css 에서 지정해 주면 돼.

.swiper {
  width: 600px;
  height: 300px;
}

마지막으로 이 스와이퍼를 작동시키는 자바스크립트는 다음과 같이 옵션들 중에서 사용할 내용만 적어 주어도 돼.

<script>
    var swiper = new Swiper(".mySwiper", {
	  speed: 1000,  // 이동시간
	  loop: true,	// 끝까지가면 다시 1번으로(무한루프)
      autoplay: {	// 자동변환
        delay: 2500,// 변환시 지연시간
        disableOnInteraction: false, // 좌우.페이지 버튼 클릭하면 자동이동 중지
      },
      pagination: { // 하단 페이지 블릿
        el: ".swiper-pagination",
        clickable: true, // 마우스로 페이지선택
      },
      navigation: { // 좌우 이동 버튼
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      mousewheel: true, // 마우스휠로 이동 여부
      keyboard: true, // 키보드 화살표키로 이동 여부
    });
</script>

와우~ 정말 간단하지?
만일 좌우 이동버튼이나 페이지목록은 필요 없다면 위 옵션에서 지워 버리면 그만이야.
이밖에도 여러가지 옵션들이 있어.
그것들은 swiper 홈페이지의 API 페이지를 보면 각종 옵션과 사용법이 자세하게 나와 있으니, 위 기본 사용법만 알면 영어가 안되도 충분히 직접 만들 수 있을거야.

마지막으로 지금까지 공부한 우리의 슬라이드쇼 화면을 swiper 로 적용한 데모페이지는 아래 링크에서 확인할 수 있어.

http://yogibbs.kr/jsDemo/carousel5-swiper.html