Swiper - 기본 설정
본문 바로가기
더 알아보기/기능

Swiper - 기본 설정

by 은돌1113 2022. 3. 2.

20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고,

공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라이브러리 모바일이라고 검색했다.

다행히 좋은 참고 자료를 볼 수 있었다.

코드가 많이 달라서 어떻게 테스트 해보지라는 걱정이 있었는 데 해결 과정 중 Link와 Script 코드를 추가하고 확인 해보니 웹, 모바일 두 곳 모두 잘 동작하는 걸 볼 수 있었다!!! 역시 좋은 자료였어라는 마음으로 CSS 마무리 했다........

이제 이미지 어떤 거 넣어야 하는 지 여쭤보고 이게 맞는 지 검사 맡은 후 새로 배포하면 될 것 같다.

 

가장 중요한 점은 두 가지인 것 같다.

1️⃣ 두 Swiper Class는 달라야 한다.

2️⃣ 아래 Link, Script를 추가 해야 한다.

 

아래 블로그 설명에 의하면 Swiper 2개를 동작 시킬 때는 서로 연동하여야 한다고 한다.

예를 들어 A라는 Main 슬라이더가 있고, B라는 Sub 슬라이더가 있다고 가정 했을 때

A라는 슬라이더를 동작 할 경우 B라는 슬라이더도 동일하게 슬라이딩 되고,

B라는 슬라이더를 동작하더라도 A라는 슬라이더가 동일하게 슬라이딩 되는,

A가 B가 서로 연동되어 제어 가능한 상태가 되어야 한다는 것이다.

이 경우 Swiper API 중에서 Controller 모듈을 사용하면 된다고 한다!!

적용 과정

 

1️⃣ Swiper 라이브러리를 설치하거나 import 해준다.

Swiper CDN 사용방법 : https://swiperjs.com/get-started#use-swiper-from-cdn

 

Getting Started With Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

 

2️⃣ Swiper 슬라이더를 2개로 연동 및 제어하기 위해서는

HTML 구조와 JavaScript, Swiper 메소드 옵션에 대해서 알아야 한다.

 

  [ HTML ]  

서로 연동되어야 하는 슬라이더 두 개를 마크업하여 만들어 준다. (Main, Thumb)

Swiper JS와 Swiper CSS 라이브러리를 CDN으로 연결한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="utf-8" />
    <title>Swiper - Swiper 2개 연동과 제어(Controller)</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
    />
  </head>
  <body>
    <div class="swiper-container gallery-top">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="swiper-slide-container">Slide 1</div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-container">Slide 2</div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-container">Slide 3</div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-container">Slide 4</div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-container">Slide 5</div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="wrap_thumb_layout">
      <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="swiper-slide-container">Slide 1</div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-slide-container">Slide 2</div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-slide-container">Slide 3</div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-slide-container">Slide 4</div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-slide-container">Slide 5</div>
          </div>
        </div>
      </div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </body>
</html>

 

  [ JavaScript ]  

Swiper 슬라이더를 동작 시키기 위해서는 JavaScript에서 Swiper를 초기화 하고 필요한 기능에 대해서는

Swiper 메소드 옵션을 사용해야 한다.

여기까지 작업을 완료하면 Main Swiper와 Thumb Swiper를 연동하지 않고 각각 동작하는 것을 확인 할 수 있다.

 

✔ spaceBetween : 슬라이드 간격 설정

✔ pagination : 페이징 사용자 설정(type : bullets, fraction, progressbar)

✔ loop : 슬라이드 반복 여부 설정

✔ loopedSlides : loop 값이 true 일 경우 파라미터 duplicate 개수 설정

✔ navigation : 네비게이션 사용자 설정(이전, 다음 버튼 설정)

✔ slidesPerView : 한번에 보여지는 슬라이드 개수 설정

✔ centeredSlides : 슬라이드 중앙 배치 여부 설정

✔ touchRatio : 드래그 비율 설정(기본값: 1, 값을 0으로 변경할 경우 드래그 불가능)

✔ slideToClickedSlide : 슬라이드가 여러개 나열되어 있을 경우, 클릭시 해당 슬라이드 위치로 이동 여부 설정

<script>
  var galleryThumbsMobile = new Swiper(".gallery-thumbs-mobile", {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  });
  var galleryTopMobile = new Swiper(".gallery-top-mobile", {
    spaceBetween: 0,
    speed: 500, // 슬라이더 넘어가는 시간
    autoplay: {
      delay: 3500, // 슬라이더 머무는 시간
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination-mobile",
      clickable: true,
    },
    thumbs: {
      swiper: galleryThumbsMobile,
    },
    navigation: {
      nextEl: ".swiper-button-next-mobile",
      prevEl: ".swiper-button-prev-mobile",
    },
  });
</script>

 

Swiper API - controller

각각 동작하는 Main Swiper와 Thumbnail Swiper를 서로 연동하여 제어하려면

Main Swiper는 Thumbnail Swiper에 연결하고, Thumbnail Swiper는 Mains Swiper에 연결하고 제어해야 합니다.

이를 위해서 Swiper 모듈의 Control의 파라미터 옵션을 사용하면

Main Swiper와 Thumbnail Swiper를 연결하여 제어 할 수 있습니다.

사용방법 및 Swiper API controller 명세서 : https://swiperjs.com/swiper-api#controller

 

Swiper API

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

galleryTop.controller.control = galleryThumbs; 
galleryThumbs.controller.control = galleryTop;
 

[Swiper Slider] Swiper 2개 연동과 제어(Controller)

Swiper The Most Modern Mobile Touch Slider 웹퍼블리싱 프로젝트를 하다보면 슬라이더는 자주 사용하는 기능 중 하나입니다. 자바스크립트로 직접 코딩해서 만들수도 있겠지만, 고객사의 잦은 기능 변경

www.biew.co.kr

 

'더 알아보기 > 기능' 카테고리의 다른 글

Swiper - 웹 팝업 슬라이드 수정  (0) 2022.03.02
Swiper - 양 옆에 이동 버튼 만들기  (0) 2022.03.02
[React] JSX에서 Switch문 사용하는 방법  (0) 2022.02.22
Sentry  (0) 2022.01.24
WebSocket  (0) 2022.01.24

관련글

댓글

티스토리툴바