메가박스 사이트 만들기 학습일지#8 - 영화차트이미지슬라이드(swiper.js)

이번시간에는 기존에 공부했던 Swiper.js 를 통해 영화차트를 움직일 수 있도록 만들어봤다!

 

 

영화차트 슬라이드 완성모습

 

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

이번에는 Swiper.js 에서 API 부분을 참고해서 코드를 작성해보자!

기본 형태 

 

* 이미지 슬라이드 자바스크립트 코드

영화차트이미지슬라이드 자바스크립트 코드

기존에 메인배너 이미지슬라이드 와 겹치는 것을 방지하기위해 선언해주는 코드를 동일하게 작성했다.

: var mySwiper = new Swiper('.swiper-container2' 

   → swiper-container2 는 구분짓기위해 클래스명을 변경

 

※ 스크립트 설명

1. slidesPerView : 지연 이미지를 미리 로드할 다음 / 이전 슬라이드의 양

2. spaceBetween : 픽셀 단위의 슬라이드 간 거리

3. mousewheel : 마우스 휠을 사용하여 슬라이드를 탐색 

4. keyboard : 키보드를 사용하여 슬라이드를 탐색

    * onlyInViewport : 활성화되면 현재 뷰포트에있는 슬라이더를 제어

5. autoplay : 자동재생 

6. breakpoint : 중단점에 따른 설정 (창 너비에 따라 설정을 달리할 수 있다.)

 

그외에, 많은 기능들이 있으며 모든것을 다 알필요는 없겠지만 사이트를참고해서 적용할 수 있는 능력을 길러야겠다!