[HTML/SCSS] Swiper 썸네일 갤러리 with 텍스트 슬라이더

메인 슬라이더와 연동되어 동작하는 작은 썸네일 슬라이더 (설명이 이상하네요 간단한 말로 뭐라 하지?) 레이아웃을 여기저기서 많이 보셨을 것입니다.

 

Swiperjs에서는 Thumbs Gallery라는 이름으로 해당 기능 데모를 제공하고 있습니다.

데모 코드를 응용해 아래와 같은 슬라이더를 만들어 보았습니다.

요즘 영화들

 

 

우선 두 개의 Swiper가 필요합니다.

메인으로 사용할 슬라이더와 썸네일 갤러리로 만들 슬라이더(thumbsSlider)입니다.

 

스크립트에도 두 개의 Swiper를 정의해야 합니다.

var swiperMini = new Swiper(".swiper-mini", {
      spaceBetween: 10,
      slidesPerView: 4,
      watchSlidesProgress: true,
    });  
var swiper = new Swiper(".swiper-lg", {
      thumbs: {
        swiper: swiperMini,
      },
});

썸네일 슬라이더 코드를 메인 슬라이더보다 상단에 두어야 하더라고요.

저는 4개의 썸네일이 있는 갤러리를 만들 거라서 slidesPerView를 4로 했습니다.

 

메인 슬라이더에는 thumbs 파라미터로 썸네일 슬라이더를 연결해 줍니다.

 

기본 데모 코드는 여기까지 인데요~

제가 최근에 퍼블리싱한 시안에는 텍스트도 들어가서 손을 좀 봤습니다.

우선 모바일 환경을 고려하여 텍스트 요소(div.content)를 두 개의 슬라이더 사이에 위치시켰습니다.

 

 

PC에서는 div.content(우측 상단)와 썸네일 슬라이더(우측 하단)을 position:absolute;로 원하는 포지션에 배치하였고

 

모바일에서는 모두 position:static;으로 바꾸어 마크업 순서대로 나타나게 하였습니다.

 

다음은 div.content의 텍스트 내용이 바뀌는 부분에 대해 살펴보겠습니다.

자식 요소들을 빼고 swiper-slide 마크업만 보면 이렇습니다.

 

슬라이드별로 data-title, data-desc 속성으로 타이틀과 설명을 지정해 두고,

메인 슬라이더의 init, slideChange 이벤트로 슬라이드에 따라 텍스트로 바뀌는 함수가 실행되게 만들었습니다.

 

on: {
    init: updateContent,
    slideChange: updateContent
  }

function updateContent() {
    var activeSlide = this.slides[this.activeIndex];
    var title = activeSlide.getAttribute('data-title');
    var desc = activeSlide.getAttribute('data-desc');
    
    var content = document.querySelector('.content');
    var contentTitle = content.querySelector('.title');
    var contentDesc = content.querySelector('.desc');
    
    contentTitle.textContent = title;
    contentDesc.textContent = desc;
  }

 

이 스크립트는 active 된 슬라이드의 data-title, data-desc를 불러와서 content의 h2.title, p.desc에 각각 삽입해 줍니다.

 

어.. 끝!

 

코드펜 코드

 

See the Pen Untitled by sel (@wimmwell) on CodePen.