[jquery] swiper 3개 연동하기, 사진 갤러리 만들기, 썸네일, 크게 보기

 

이번에 신규 페이지를 제작하며 갤러리를 만들어야 했는데,

다양한 라이브러리를 찾아보다가 기존에 자주 사용하던 swiper를 이용하여 갤러리를 구성할 수 있다는 걸 깨달았다.

먼저 예시를 보자면 다음과 같다.

( 예제 화면이 작게 보인다면 아래쪽 0.5x 클릭하여 확인하기 )

 

 

See the Pen swiper 3개 연동하기, thumbnail swiper and layer popup by Gia (@gia-world) on CodePen.

 

 

구성은 3개의 슬라이더로 되어있다.

메인 사진 슬라이더,

썸네일 슬라이더,

레이어 팝업 슬라이더.

 

메인 슬라이더를 넘기면 썸네일도 함께 넘어가고,

썸네일 슬라이더를 넘기면 메인도 같이 돌아간다.

또한 메인 사진을 클릭하여 팝업을 띄울 경우에도

메인 슬라이더와 연동이 되어있다.

 

 

  // 썸네일 슬라이더
  var sliderThumbnail = new Swiper(".slider-thumbnail", {
    slidesPerView: 3,
    spaceBetween: 4,
    watchSlidesProgress: true,
    centeredSlides: true,
    loop: true
  });

  //메인 슬라이더
  var slider = new Swiper(".slider", {
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    thumbs: {
      swiper: sliderThumbnail
    }
  });

  // 팝업 슬라이더
  var sliderPopup = new Swiper(".slider-popup", {
    autoHeight: true,
    spaceBetween: 60,
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    pagination: {
      el: ".swiper-pagination"
    }
  });

  // 메인 슬라이더, 팝업 슬라이더 연결
  slider.controller.control = sliderPopup;
  sliderPopup.controller.control = slider;

 

내가 작성한 코드를 살펴보면 메인 슬라이더 .slider 안에 thumbs : {} 로 썸네일 슬라이더를 지정해두었다.

썸네일은 현재 active 슬라이드를 가운데에 오도록 centeredSlides를 사용했다.

팝업 슬라이더의 경우는 최하단에 메인 슬라이더와 controller를 연결하였다.

 

기본 swiper 사용은 여러번 해보았으나 이렇게 여러개를 연동해서 사용하는 것은 처음이라

예제를 많이 참고하였는데,

이번 경우 키워드를 통한 구글링으로는 힘들었던 것 같다.

swiper mdn의 데모,

그리고 codepen에서 한글, 영어 각각 다양한 키워드로 검색하며 참고했다.

 

 

 

 

참고 : https://codepen.io/intotheprogram/pen/PowvWeX