slick-carousel 사용하여 슬라이드 구현

1.  slick-carousel이란?

slick-carousel은 반응형 웹 사이트에서 사용할 수 있는 jQuery 기반의 이미지 슬라이드 쇼 라이브러리입니다. 이 라이브러리를 사용하면 사용자 친화적인 화살표 버튼, 터치 제스처, 무한 루프 및 자동 재생과 같은 다양한 기능을 구현할 수 있습니다.

 

slick-carousel

 

 

 

2.  slick-carousel 사용한 이유?

    1.  slick-carousel을 사용하면 웹 페이지에서 이미지나 컨텐츠를 다양한 슬라이드 쇼 기능으로 보여줄 수 있습니다.
    2.  슬라이드 쇼 기능은 사용자가 보고 싶은 이미지나 컨텐츠를 선택적으로 보여주는 것이 가능하며, 사용자 친화적인 UI를 제공함으로써           사용자 경험을 향상시킬 수 있습니다.
    3.  React에서는 react-slick이라는 라이브러리를 사용하여 slick-carousel을 구현할 수 있습니다.
    4.  react-slick을 사용하면 React 컴포넌트 내에서 slick-carousel을 쉽게 구현할 수 있고, 다양한 옵션을 적용할 수 있습니다.
    5.  react-slick은 React 환경에서 최적화된 속도와 성능을 제공하여 높은 품질의 웹 페이지를 만들 수 있습니다.

 

---

📌                                             Swiper                                           vs                                          Slick-carousel

설계 목적	모바일 스와이프 이벤트에 특화	웹 이미지 슬라이드 쇼 제공
기능	스와이프 효과, 다양한 애니메이션 효과 제공	브라우저 호환성이 높고 다양한 옵션 제공
환경	모바일 환경에 적합	웹 환경에 적합
라이브러리	jQuery, React, Vue 등 다양한 라이브러리 제공	React, Vue 등 다양한 라이브러리 제공
주요 사용처	모바일 웹 앱, 모바일 터치 이벤트를 활용한 UI	웹 페이지의 이미지 슬라이드 쇼

 

 

 

 3. 구현 결과 

 

 

slick-carousel 사용하여 슬라이드 구현

 

 

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import tripData from '@/data/tripData.json';
import 'slick-carousel/slick/slick-theme.css';
import { CardTitle, CardWrapper, SliderWrapper } from './CardListStyled';

export const CardList = () => {
  return (
    <>
      <CardTitle>Popular Countries</CardTitle>
      <SliderWrapper tabIndex={0}>
        <Slider {...settings}>
          {tripData.map((card) => (
            <CardWrapper key={card.id}>
              <img src={card.img} alt={card.name} />
              <p>{card.name}</p>
            </CardWrapper>
          ))}
        </Slider>
      </SliderWrapper>
    </>
  );
};

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,        // 한 화면에 보여질 슬라이드 수
  slidesToScroll: 1,      // 한 번에 스크롤할 슬라이드 수
  autoplay: true,         // 자동 슬라이드 재생 여부
  autoplaySpeed: 3000,
  accessibility: true,    // 키보드 이벤트 활성화
  responsive: [           // 반응형 속성 설정
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        initialSlide: 1,      // 초기 슬라이드 위치
      },
    },
  ],
};