Swiper 응용 :: 여러 개 노출 및 미리보기

if..

한 페이지에 스와이퍼를 여러 개 생성해야 한다면?
한 번에 노출되는 슬라이드 갯수가 여러개라면?
이전, 다음 순서의 슬라이드도 보여지게 하고싶다면?
반응형 분기점에서 컨트롤하고 싶다면?
Tab컴포넌트 안에 넣어야한다면?

기준

v4.5.1

💻결과물

JavaScript

• 슬라이더 컴포넌트가 여러 개 있다고해서 자바스크립트에서도 슬라이더마다 각각 개별적으로 생성하지 않는다.
  1개일 때와 동일
• slidesPerView : 보여질 슬라이드 갯수
• slidesPerGroup : 슬라이드 넘길 때 이동 갯수
• breakpoints : 반응형 설정
• observer : display: none이 되는 컴포넌트 안에서 Swiper를 사용하는 경우에 필요. ex) 탭
• observeParents : display: none이 되는 컴포넌트 안에서 Swiper를 사용하는 경우에 필요. ex) 탭

document.addEventListener("DOMContentLoaded", function() {

    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 4,
        slidesPerGroup: 4,
        observer: true,
        observeParents: true,
        spaceBetween: 24,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            1280: {
                slidesPerView: 3,
                slidesPerGroup: 3,
            },
            720: {
                slidesPerView: 1,
                slidesPerGroup: 1,
            }
        }
    });
    
});

CSS

• 이전 슬라이드와 다음 슬라이드를 미리보기 위해
  넘치는 부분들이 보여지도록 overflow: visible; 처리
• 슬라이드들을 모두 opacity 연하게 주고, 활성화된 슬라이드들만 opacity 선명하게 처리한다.

.swiper-container {overflow: visible;}
.swiper-slide {opacity:0.4; transition:opacity 0.3s;}
.swiper-slide-active,
.swiper-slide-active + .swiper-slide,
.swiper-slide-active + .swiper-slide + .swiper-slide,
.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {opacity:1}

HTML

Swiper를 여러 개 생성해도 각각 정상적으로 작동하는 지 보기 위해
2개의 Slider container를 생성하였다.

...
<h2>슬라이더1</h2>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<h2>슬라이더2</h2>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
...

Reference

https://www.kookmin.ac.kr/comm/board/user/46c025a625a3234f240ddb1d819a1816/index.do
학습용으로 이 사이트 코드 참고하여 공부했습니다. 쿠민이 커엽