2024.02.26 TIL - swiper, slick 비교(slider 리액트 라이브러리)

swiper VS slick

이번 과제하며 느낀 swiper와 slick 비교

swiper

• 장점
  • header의 배너처럼 간단하고 단순하게 넘어가는거 만들기엔 쉬움
  • 공식문서가 잘되어있어 처음 접하더라도 쉽게 사용할 수 있음
    (예시로 보여주는것까진 없지만 비교적 친절한 편)
• 단점
  • 자율성이 좀 떨어지는 느낌을 받았음
  • 섬세한 작업이 필요한 경우에는 적합하지 않은 것 같음
    ex) autoplay되는 infinite carousel을 만들고 싶었는데, 양옆이 흐림과 동시에 navigation 버튼 클릭도 함께 구현하고싶었는데 동시에는 안되더라.
    그리고 navigation버튼이 계속 slider내용물과 겹쳐서 나오고, 슬라이더 내용물과 독립적으로 바깥에 빼고싶었는데 잘 안됐음

slick

• 장점
  • 공식문서가 잘되어있음. 코드와 함께 동작 예시도 보여줘서 처음 접하더라도 활용 용이
  • 섬세한 작업이 가능함
    (navigation버튼을 슬라이더 바깥에 독립적으로 두기, 버튼 css 변경하기 등)

    참고 : slick 슬라이드 화살표 꾸미기

• 단점
  • 기본적으로 적용되어있는 css가 많은 것 같고, 그걸 찾아서 바꾸는게 좀 빡세다.
    (내가 넣은 css가 아닌데 적용되어있어서 개발자 모드로 열어서 class-name 확인 후 node_modules 안에 slick폴더 안에 css파일 뒤져가며 class이름 찾아서 바꿔주고 또 거기서 바꾼건 module을 바꾼거라 서버도 다시 열어야됨 yarn dev)
  • 양옆에 흐리게 하는거 잘하면 될수도 있을 것 같은데 일단 보류함... 복잡하고 적용이 쉽지 않다는 뜻

🌈 slick setting 정리

참고 : https://www.inflearn.com/blogs/3749

  rows: 1,                    //이미지를 몇 줄로 표시할지 개수
  dots: false,                //슬라이더 아래에 도트 네비게이션 버튼 표시 여부(true or false) ▶기본값 false
  appendDots: $('selector'),  //네비게이션 버튼 변경
  dotsClass: 'custom-dots',   //네비게이션 버튼 클래스 변경
  infinite: true,             //무한반복(true or false) 기본값 true
  slidesToShow: 4,            //한번에 보여줄 슬라이드 아이템 개수
  slidesToScroll: 4,          //한번에 넘길 슬라이드 아이템 개수
  slidesPerRow: 1,            //보여질 행의 수 (한 줄, 두 줄 ... )
  autoplay: true,             //슬라이드 자동 시작(true or false) ▶기본값 false
  autoplaySpeed: 2000,        //슬라이드 자동 넘기기 시간(1000ms = 1초) 곧, 슬라이드 하나당 머무는 시간
  variableWidth: true,        //사진마다 width의 크기가 다른가?(true or false) ▶기본값 false
  draggable: false,           //슬라이드 드래그 가능여부 (true or false) ▶기본값 true
  arrows: true,               //이전 다음 버튼 표시 여부(true or false) ▶기본값 true
  pauseOnFocus: true,         //마우스 클릭 시 슬라이드 멈춤 ▶기본값 true
  pauseOnHover: true,         //마우스 호버 시 슬라이드 멈춤 ▶기본값 true
  pauseOnDotsHover: true,     //네이게이션버튼 호버 시 슬라이드 멈춤 ▶기본값 false
  vertical: true,             //세로 방향 여부(true or false) ▶기본값 false
  verticalSwiping: true,      //세로 방향 스와이프 여부(true or false) ▶기본값 false
  accessibility: true,        //접근성 여부(true or false) 기본값 false
  appendArrows: $('#arrows'), //좌우 화살표 변경
  prevArrow: $('#prevArrow'), //이전 화살표만 변경
  nextArrow: $('#nextArrow'), //다음 화살표만 변경
  initialSlide: 1,            //처음 보여질 슬라이드 번호 ▶기본값 0
  centerMode: true,           //중앙에 슬라이드가 보여지는 모드 ▶기본값 false
  centerPadding: '70px',      //중앙에 슬라이드가 보여지는 모드에서 패딩 값
  fade: true,                 //크로스페이드 모션 사용 여부 ▶기본값 false
  speed: 2000,                //모션 시간 (얼마나 빠른속도로 넘어가는지)(1000ms = 1초) 곧, 슬라이드 사이에 넘어가는 속도
  waitForAnimate: true,       //애니메이션 중에는 동작을 제한함 ▶기본값 true