[javascript] Slick Carousel을 사용하여 이미지를 확대/축소할 수 있나요?

24 Nov 2023

javascript

Slick Carousel은 이미지 슬라이더를 구현할 수 있는 강력한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 이미지 갤러리, 배너 슬라이드 또는 상품 슬라이더와 같은 다양한 슬라이드 쇼를 만들 수 있습니다.

이미지를 확대/축소하기 위해 Slick Carousel의 설정을 약간 수정해야합니다. 따라서 다음과 같이 코드를 작성할 수 있습니다.

$('.your-carousel-class').slick({
  // 기본 설정
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  
  // 추가 설정
  centerMode: true,
  variableWidth: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
      }
    }
  ],
});

$('.your-carousel-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('.slick-slide').each(function(){
    // 현재 슬라이드의 인덱스와 다음 슬라이드의 인덱스를 비교하여 크기를 조절합니다.
    if($(this).hasClass('slick-current')){
      $(this).css('transform', 'scale(1.2)'); // 크게 표시
    } else {
      $(this).css('transform', 'scale(1)');   // 기본 크기
    }
  });
});

위 코드에서 .your-carousel-class를 원하는 이미지 슬라이더의 클래스로 변경해야합니다. 또한, breakpoint를 사용하여 반응형 디자인을 지원하고 있으며, 이미지를 확대/축소하는 부분은 slick 이벤트 핸들러인 beforeChange에서 처리됩니다.

위 코드를 사용하여 Slick Carousel을 통해 이미지를 확대/축소하는 이미지 슬라이더를 만들 수 있습니다. Slick Carousel의 공식 문서(https://kenwheeler.github.io/slick/)에서 자세한 설정 방법과 다양한 옵션을 확인할 수 있습니다.