swiper 여러개 적용하기

정말 좋은 오픈 소스 swiper는 깔끔한 디자인에 멋진 제이쿼리를 제공해주는데요.

이번에 처음으로 다중으로 적용을 해보았네요.

http://idangero.us/swiper/

swiper 홈페이지

기본 html은 이렇게 구성이 되는데요.

<!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div>

저 안에 Slide1안에 또 swiper를 넣으려고 했답니다.

이럴때 swiper-container를 하나 더 만들어줘야하나~ wrpper를 더 만들어야 하나~ css를 어떻게 관리해야하나 고민스러웠는데요.

그럴 필요없이 별도의 클래스를 하나 더 만들어 주면 된답니다.

<script> var swiper = new Swiper('.swiper-container', { direction: 'vertical', slidesPerView: 1, spaceBetween: 30, mousewheel: true, pagination: { el: '.swiper-pagination', clickable: true, }, }); </script>   <script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script>

위와 같이 자바스크립트가 두개 이면

.swiper-container 클래스가 중복되니 .swiper-container을 사용하지 말고, 새로운 클래스를 두개로 지정해주면 됩니다.

아래를 보시면 바로 이해가 되실꺼에요. ^^;

<div class="swiper-container first"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-container second"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div>

위 처럼 클래스를 first와 second로 별도로 나눠서 만들어주구요.

<!-- Initialize Swiper --> <script> var swiper = new Swiper('.first', { direction: 'vertical', slidesPerView: 1, spaceBetween: 30, mousewheel: true, pagination: { el: '.swiper-pagination', clickable: true, }, }); </script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.second', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script>

이렇게 first와 second 클래스를 별도로 만들어서 구분을 해주기만 하면 아주 잘 작동한답니다.

완전 초보 퍼블리셔라 아는 것이 잘 없습니다.

개인적인 메모장 성격을 가지고 있는 카테고리입니다.

저같은 초보분들에게 정보가 되길 바랄뿐입니다.