Swiper 활용하기 - 02

swiper demo : https://swiperjs.com/demos

Swiper Demos

swiper 활용하기 두번째

swiper를 이용해서 여러 종류의 슬라이드를 만들고
네비게이션 버튼과 페이지네이션 버튼으로 제어를 했고
자동으로 넘어가는 기능을 연습했고

2025.05.18 - [Swiper] - swiper? 슬라이드 라이브러리 첫걸음

 

화면에 보이는 슬라이드 갯수 ( Slides per view ),

cssMode,

슬라이드 간격 ( Space between ),

무한 슬라이드 ( loop )

를 이용해 디자인을 수정해보았다.

2025.05.21 - [Swiper] - Swiper 활용하기 - 01

 

이번에는 버튼을 클릭 하지 않고

마우스와 키보드를 이용하여 슬라이드를 넘기는 기능과

반응형을 위한 기능을 공부한다.

 

1. 마우스로 슬라이드 이동하기 mousewheel

mousewheel의 core에 들어가

코드를 가져온다.

 

mousewheel : true, 일 때 기능이 활성화 되고 false를 하면 비활성화 한다.

기능을 활성화 하게 되면 버튼을 굳이 누르지 않고 마우스 휠을 움직이기만 해도 슬라이드를 이동할 수 있다

 

2. 키보드로 슬라이드 이동하기 keyboard

keyboard control 의 core에 들어가

를 가져온다.

 

keyboard: { enabled : true, },

또는

keyboard: true,

 

 라고 입력하면 활성화해 키보드의 ← , ↑ , ↓ , → 방향키를 이용하여 슬라이드를 이동할 수 있다.

 

3. 반응형 슬라이드 breakpoints

반응형 breakpoints에는 두가지 유형이 있는데

Responsive Breakpoints 는 화면의 너비를 기준으로 변하고

Ratio breakpoints는 화면의 가로 세로 비율을 기준으로 변한다

 

Responsive Breakpoints 의 core에 들어가

코드를 가져온다.

breakpoints 안에 숫자를 입력하게 되면 

해상도가 해당 숫자 이상일 때 적용이 된다.

예를 들면 가져온 코드를 적용한 상태에서 해상도가 720px이라면 648 이상 768 미만이기 때문에

648로 적용되어 slidesPerView : 2, spaceBetween : 20 이 적용된다.

 

화면의 너비가 아닌 비율을 기준으로 변화하고 싶다면

 

 Ratio breakpoints 의 core에 들어가 

 

코드를 가져온다

 

Responsive Breakpoints와는 다르게 큰따옴표 안에 "@숫자" 형태로 입력을 해야 한다.

숫자로 현재 화면의 가로 : 세로의 비율을 적을 수 있는데 (  가로 길이 ÷ 세로 길이 ) 로 계산해서 적용된다.

 

위 코드를 적용했을 때를 예시로

현재 화면의 크기가 ( 가로 : 768 / 세로 : 1024 ) 이라면

가로 길이 ( 768  ) ÷ 세로 길이( 1024  ) = 0.75로

"@0.75"의 "slidesPerView : 2, spaceBetween : 20," 이 적용된다

 

 

마무리로 지금까지 공부한 script를 정리

 <script>
      var swiper = new Swiper(".mySwiper", {
        effect: "slide",
        cssMode: false,
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        keyboard: true,
        autoplay: {
          delay: 2500,
          disableOnInteration: false,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          type: "progressbar",
          clickable: true,
        },
        breakpoints: {
          640: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 4,
            spaceBetween: 40,
          },
          1024: {
            slidesPerView: 5,
            spaceBetween: 50,
          },
        },
      });
    </script>