Library/Swiper

pagination 2개 사용하기

Swiper 페이징은 다음 코드로 추가할 수 있지만 오직 하나의 타입 밖에 사용할 수 없다.

const swiper = new Swiper('.swiper', {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},

하지만 웹사이트를 만들다보면 Swiper 2개를 동시에 사용해야하는 상황이 발생할 수 있다.

원리는 간단하다.

Swiper가 총 2개 필요한데 하나는 메인이 되는 Swiper로, 슬라이드와 페이징 하나(위 예제에서는 Fraction 혹은 Progressbar)를 실행하고

나머지 하나는 다른 페이징 형태 하나를 실행한다.

그리고 controller로 메인 Swiper가 서브 Swiper를 제어하도록 한다.

var mainSwiper = new Swiper(".swiper-container", {
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

var pagingSwiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination2",
    type: "progressbar",
  },
});

mainSwiper.controller.control = pagingSwiper;

또 다른 경우로는

Swiper 2개를 같이 연동해야 하는 상황이 발생할 수 있다.

여기서 말하는 연동이란, A 슬라이더를 여러 방법으로 동작할 때, B 스와이퍼도 움직이는 것을 말한다.

마찬가지로 B 슬라이더를 움직이더라도 A 슬라이더가 함께 움직이는 것도 포함한다.

🔎 html 기본구조

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="main_swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/images/galaxy_s5.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/galaxy_s6.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/galaxy_s7.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/galaxy_s8.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/galaxy_s9.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/galaxy_s10.jpg" alt="">
        </div>
      </div>
      <div class="main_nav">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <div class="sub_swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/images/s5.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/s6.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/s7.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/s8.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/s9.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/images/s10.jpg" alt="">
        </div>
      </div>
      <div class="sub_nav">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

<!-- jQuery cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.js"></script>
  <script src="script.js"></script>
</body>

css

.swiper-container {
width: 600px;
text-align: center;
}
.swiper-container img {
width: 100%;
}

javascript

var MainSwiper = new Swiper('.main_swiper .swiper-container');
var SubSwiper = new Swiper('.sub_swiper .swiper-container');

html에는 main_swiper 와 sub_swiper 를 만들고 기본적인 css를 추가하고 자바스크립트로 swiper를 실행했다.

여기까지는 일반적으로 스와이퍼를 실행하는 방법이다.

이제 좌우에 화살표(Navigation)와 하단에 버튼(Pagination)을 추가하자.

var MainSwiper = new Swiper('.main_swiper .swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
	clickable: true,
	},
	});
	var SubSwiper = new Swiper('.sub_swiper .swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
	},
});

이제 네비게이션과 페이지네이션이 존재하는 스와이퍼가 완성되었다.

저작자표시

Contents

새소식

인기 검색어

pagination 2개 사용하기

티스토리툴바