Slick으로 회전 목마 만들기

회전 목마 또는 슬라이딩을 추가하고 싶으십니까? 나는 최근에 그것을했고 지금 당신과 그것을 공유하는 시간을 갖습니다. 어떻게 할 수 있는지 함께 봅시다.

슬라이딩 캐러셀을 최대한 원활하게 통합하기 위해 Slick 스크립트 및 스타일을 구현하는 단계를 살펴보겠습니다.

코드 준비

Slick website 또는 Github으로 이동하여 파일을 다운로드할 수 있습니다.

CSS 및 JavaScript 소스에 대한 이러한 CDN 링크를 가리킬 수도 있습니다.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

이제 Slick HTML 요소를 만들어야 합니다. 콘텐츠를 포함하는 div 목록의 부모가 됩니다. Slick 부모는 slick ID를 사용하고 data-slick 속성을 갖습니다.

<div id="slick" data-slick='{}'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

이 경우 div 요소로 정의된 6개의 슬라이드가 있습니다. 여기에 콘텐츠를 추가할 것입니다(cfr Codepen 예제).

기본 캐러셀이 작동하도록 하려면 추가 단계가 필요합니다. JavaScript에서 Slick 요소를 시작합니다.

$("#slick").slick({});

이제 기본 Slick 캐러셀이 있습니다. 일부 설정을 변경해야 하는 경우 어떻게 합니까?

캐러셀 설정 선택

우리는 wide range of settings 으로 작업할 수 있습니다.
가장 유용한 것은 다음과 같습니다.

슬라이딩 속도(ms): speed

표시할 슬라이드 수: slidesToShow

스크롤할 슬라이드 수: slidesToScroll

회전목마가 무기한 슬라이드하는지 여부: infinite

반응성:responsive

이러한 설정은 data-slick 속성 내부의 HTML에서 정의할 수 있지만 JavaScript 내부에서 정의하는 것이 좋습니다.

$("#slick").slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3
});

캐러셀이 이제 새로운 설정에 따라 작동합니다! 어떻게 생겼는지 봅시다.

Codepen의 라이브 예제

예는 백만 단어의 가치가 있지 않습니까? 😄


jQuery를 사용하기 때문에 약간 무겁지만 Slick은 여전히 ​​매우 간단한 통합입니다.
Ken Wheeler에게 큰 감사를 드립니다!

계속 플레이하여 배우세요! 🔥

내가 제공하는 것에 가치가 있다면 주저하지 말고 buy me a coffee 😇