Slick.js를 사용하여 웹사이트에 캐러셀을 추가하세요.

이 튜토리얼에서는 Slick.js를 사용하여 캐러셀을 처리한 다음 웹 사이트에 추가하는 방법을 보여줍니다. 먼저 간단한 이미지 캐러셀을 만들고 기본 스크롤 기능을 제공한 다음 캐러셀에 다양한 속성을 천천히 추가하고 필요에 따라 캐러셀을 일부 변경해 보겠습니다.

라이브러리를 사용하지 않고 캐러셀을 만들려고 하면 시간이 많이 소모됩니다. 노력을 줄이고 다양한 속성을 가진 여러 유형의 캐러셀을 추가하려면 slick.js를 사용할 수 있습니다.

Slick.js는 매우 유명하고 널리 사용되는 jQuery 플러그인으로, 여러 속성과 다양한 속성을 갖춘 반응형 캐러셀을 만들 수 있습니다.

슬릭의 기능

Slick.js는 여러 가지 이유로 캐러셀을 위한 완벽한 선택입니다. 이러한 이유 중 일부는 아래에 언급되어 있습니다 -

• 완전히 반응하는 캐러셀을 제공합니다.

• 캐러셀은 컨테이너에 따라 크기가 조정됩니다.

• 개별 설정에 대해 서로 다른 중단점을 사용할 수 있습니다.

• CSS3 포함 여부는 귀하에게 달려 있습니다.

• 데스크탑 마우스 드래그를 지원합니다.

• 무한 루프가 있습니다.

다음은 캐러셀을 만드는 전통적인 방법과 비교하여 Slick이 제공하는 인기 있는 기능 중 일부입니다.

Slick으로 캐러셀 만들기

이제 Slick에 익숙해졌으니 Slick을 사용하여 캐러셀을 만드는 방법을 배울 차례입니다. 캐러셀을 만드는 첫 번째 단계는 HTML 파일과 CSS 파일을 준비하는 것입니다. 왜냐하면 이 파일에서 우리는 캐러셀도 포함할 웹사이트의 로직을 작성할 것이기 때문입니다.

다음 명령을 실행하세요 -

으아악

위 명령에서는 index.html과 styles.css라는 두 개의 파일을 만들었습니다.

참고 - index.html이 컴퓨터에서 실행되지 않을 수 있습니다. vi 명령을 사용하여 두 파일을 모두 생성하세요.

이제 아주 기본적인 캐러셀을 만드는 데 필요한 HTML 코드를 작성해 보겠습니다.

index.html

예

으아악

지침

자, 어려운 부분은 끝났습니다. index.html 파일에서 Slick을 사용하는 방법과 우리가 사용하는 속성 및 기능에 중점을 두겠습니다.

Slick을 사용할 때 가장 먼저 해야 할 일은 Slick을 설치하거나 코드에서 사용할 수 있도록 하는 것입니다. 이를 다양한 방법으로 수행할 수 있습니다. 가장 쉬운 방법은 CDN 링크를 사용하는 것인데, 제가 html 파일에서 했던 것처럼요.

다음 코드 조각은 index.html 파일의 head 태그에 두 개의 CDN이 있음을 보여줍니다.

으아악

그런 다음 HTML에 더 많은 CDN을 추가해야 하지만 head 가 아니라 body 태그 안에 추가해야 합니다. 아래에 표시된 코드 조각을 고려하세요.

으아악

위 코드 조각에서는 js 기능을 추가하는 slick.min.js와 함께 jQuery 종속성을 가져왔습니다.

이제 재미있는 부분이 있습니다. Slick을 사용해야 합니다. 이를 위해 지정된 높이와 너비를 가진 다양한 이미지가 포함된 여러 div가 있는 carousel b>이라는 클래스를 만든 것을 볼 수 있습니다.

carousel이라는 클래스는 body 태그 안의 스크립트 태그 내에서 사용됩니다. 여기에서 jQuery 함수를 생성한 다음 "$" 연산자와 slick을 단일 세트 속성을 전달하는 메서드로 사용합니다. SlidesToShow: 2, , 이는 Slick에게 한 번에 2개의 슬라이드만 표시하고 싶다고 알려줍니다.

이제 브라우저에서

index.html 파일을 실행하면 특정 순간에 2개의 이미지가 표시된 다양한 이미지의 캐러셀을 볼 수 있으며 왼쪽과 오른쪽 중앙에 있는 화살표 버튼을 눌러 이동할 수도 있습니다. 이미지의 다음 이미지 세트가 표시됩니다.

캐러셀에 재미있는 속성을 추가하세요

이렇게 해서 기본 캐러셀이 완성되었습니다. 이제 캐러셀의 동작을 변경하기 위해 흥미로운 속성을 추가하는 방법에 대해 이야기하겠습니다. 이는

".slick({})" 메서드에 set 속성을 추가하여 수행할 수 있습니다.

캐러셀 사용자가 클릭한 다음 특정 이미지로 이동할 수 있는 점 옵션을 원한다고 가정해 보겠습니다. 이는

dots 속성을 추가하여 수행할 수 있습니다. 아래에 표시된 코드 조각을 참조하세요. 으아악

이전의

".ready()" 메소드를 위에 표시된 코드 조각으로 바꾸면 브라우저의 캐러셀 아래에 다른 개수의 점이 나타나는 것을 볼 수 있습니다. 다음과 같이

dotsClass 속성을 추가하여 점의 유형이나 카테고리를 변경할 수도 있습니다. 으아악

여러

dotClasses를 사용할 수 있으며 가장 인기 있는 것은 -입니다.

• 부드럽다

• 부드러운 회전목마

• 부드럽고 활동적입니다

웹사이트의 다양한 캐러셀에서 볼 수 있는 캐러셀의 가장 중요한 기능 중 하나는 버튼을 클릭한 후 다음 이미지나

div로 이동할 필요 없이 캐러셀이 자동으로 실행되는 것을 볼 수 있는 자동재생 기능입니다. 이 작업은 Slick.js의 autoPlay 속성을 사용하여 쉽게 수행할 수 있습니다. 아래에 표시된 코드 조각을 참조하세요.

$(document).ready(function () { 
   $('.carousel').slick({ 
      slidesToShow: 2, 
      dots: true, 
      dotsClass: 'slick-dots', 
      autoplay: true, 
      autoplaySpeed: 1000, 
   }); 
});

在上面的代码片段中，我们添加了具有不同属性的 Slick，其中之一是 autoplay 属性以及 autoplaySpeed，它告诉我们在什么情况下显示下一个图像或 div 的时间，在我们的例子中，为 1000 毫秒。

如果运行 HTML 代码，您将看到轮播将处于自动播放模式，图像每 1000 毫秒或 1 秒更改一次。

结论

在本教程中，我们演示了如何使用 Slick.js 创建您选择的轮播并将其添加到您的网站上。

위 내용은 Slick.js를 사용하여 웹사이트에 캐러셀을 추가하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!