Home >Web Front-end >JS Tutorial >Add carousels to your website using Slick.js

Add carousels to your website using Slick.js

WBOYforward: 2023-09-04 20:37:021214browse

使用 Slick.js 将轮播添加到您的网站

In this tutorial, we will demonstrate how to use Slick.js to handle carousels and then add them to your website. We will start by creating a simple carousel of images and provide basic scrolling functionality, and then slowly add different properties to the carousel and make some changes to the carousel according to our needs.

If you try to create a carousel without using any library, it will be very time consuming. To reduce the effort and be able to add multiple types of carousels with different properties, you can use slick.js.

Slick.js is a very famous and widely used jQuery plugin that allows us to create responsive carousels with multiple properties and different attributes.

Function of Slick

Slick.js is a perfect choice for carousels for several reasons. Some of these reasons are mentioned below -

It provides fully responsive carousel.
The carousel scales with its container.
It allows you to use different breakpoints for individual settings.
Whether or not to include CSS3 is your choice.
Support desktop mouse dragging.
There is an infinite loop.

These are some popular features that Slick provides us compared to the traditional way of creating carousels.

Create a carousel using Slick

Now that we’re familiar with Slick, it’s time to learn how to use it to create carousels. The first step in creating a carousel is to have an HTML file and a CSS file, because in these files we will write the logic for our website, which will also contain the carousel.

Run the following command -

touch index.html styles.css

In the above command, we created two files, index.html and styles.css.

Note - It is possible that index.html may not run on your machine, please use the vi command to create both files.

Now, let's write the HTML code needed to create a very basic carousel.

index.html

Example

<html> 
<head> 
   <title> Slick Carousel - Example</title> 
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.css" /> 
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick-theme.css" /> 
   <style> 
      html, 
      body { 
         background-color: #7b6e6d; 
      } 
      .wrapper { 
         width: 100%; 
         padding-top: 20px; 
         text-align: center; 
      } 
      h2 { 
         font-family: sans-serif; 
         color: #fff; 
      } 
      .carousel { 
         width: 90%; 
         margin: 0px auto; 
      } 
      .slick-slide { 
         margin: 10px; 
      } 
      .slick-slide img { 
         width: 100%; 
         border: 2px solid #fff; 
      } 
      .wrapper .slick-dots li button:before { 
         font-size: 20px; 
         color: white; 
      } 
   </style> 
</head> 
<body> 
   <div class="wrapper"> 
      <h2>Slick Carousel - Example 
      <div class="carousel"> 
         <div> 
            <img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk"    style="max-width:90%"  style="max-width:90%" alt="Add carousels to your website using Slick.js"> 
         </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I"    style="max-width:90%"  style="max-width:90%" alt="Image-2"> 
         </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y"    style="max-width:90%"  style="max-width:90%" alt="Image-3"> 
         </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/css/images/css-mini-logo.jpg?hmac=AW_7mARdoPWuI7sr6SG8t-2fScyyewuNscwMWtQRawU"    style="max-width:90%"  style="max-width:90%" alt="Image-4"> 
         </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/dom/images/dom-mini-logo.jpg?hmac=Jo3ofatg0fee3HGOliAIIkcg4KGXC8UOTO1dm5qIIPc"    style="max-width:90%"  style="max-width:90%" alt="Image-5"> 
         </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ"    style="max-width:90%"  style="max-width:90%" alt="Image-6"> 
         </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=zEuPfX7t6U866nzXjWF41bf-uxkKOnf1dDrHXmhcK-Q"    style="max-width:90%"  style="max-width:90%" alt="Image-7">         </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM"    style="max-width:90%"  style="max-width:90%" alt="Image-8">          </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=Tn9CS_V7lFSMMgAI5k1M38Mdj-YEJR9dPJCyeXNpnZc"    style="max-width:90%"  style="max-width:90%" alt="Image-9">          </div> 
         <div> 
            <img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=fZe213BcO2KPQEJKChsdHnVYg-6kAtQMTZV24f1fS94"    style="max-width:90%"  style="max-width:90%" alt="Add carousels to your website using Slick.js0">          </div> 
      </div> 
   </div> 
   <script type="text/javascript" src="https://code.jquery.com/jquery1.11.0.min.js"></script> 
   <script type="text/javascript" src="https://code.jquery.com/jquery-migrate1.2.1.min.js"></script> 
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script> 
      <script type="text/javascript"> 
      $(document).ready(function() { 
         $('.carousel').slick({ 
            slidesToShow: 2, 
            autoplay: true, 
         }); 
      }); 
   </script> 
</body> 
</html>

illustrate

Okay, the hard part is over. Let's focus on how to use Slick in the index.html file and the properties and features we use.

The first thing when using Slick is to be able to install it or make it available in our code, we can do this in different ways. The easiest way is to use a CDN link, which is what I did in my html file.

The following code snippet shows the presence of two CDNs in the head tag of the index.html file.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.css" /> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick-theme.css" />

Then we also need to add more CDN in the HTML, but not in the head, but inside the body tag. Consider the code snippet shown below.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate1.2.1.min.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>

In the above code snippet, we imported the jQuery dependency as well as slick.min.js which adds js functionality.

Now comes the fun part, we need to use Slick, for this you can see I created a class called carousel which has multiple div b> containing Different images with specified height and width.

The class named carousel is used inside the script tag inside the body tag, where we create a jQuery function and then use the "$" operator and slick as we pass The single method that sets the property, slidesToShow: 2,, tells Slick that we only want to show 2 slides at a time.

Now if we run the index.html file in the browser we should be able to see a carousel of different images with 2 images showing at a specific moment and we can also move to pressing The arrow buttons in the left and right center of the image display the next set of images.

Add interesting attributes to the carousel

In this way, our basic carousel is completed. Now let's talk about adding interesting properties to change the behavior of the carousel, this can be done by adding a set property in our ".slick({})" method.

Suppose we also want the user of the carousel to have a dot option where he can click and then go to a specific image, this can be done by adding the dots attribute. See the code snippet shown below.

$(document).ready(function () { 
   $('.carousel').slick({ 
      slidesToShow: 2, dots: true, 
   }); 
});

If we replace the previous ".ready()" method with the code snippet shown above, then we will be able to see a different number of dots appear below the carousel in the browser.

We can also change the type or category of dots by adding the dotsClass attribute as follows:

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

There are multiple dotClasses available, the most popular is -

Smooth spot
Smooth Carousel
Smooth and active

One of the most important features of the carousel that you may see in different carousels on your website is the Autoplay feature where you can see the carousel run automatically without having to Click the button and move to the next image or div, This can be easily done in Slick.js with the help of the autoPlay property. See the code snippet shown below.

$(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 创建您选择的轮播并将其添加到您的网站上。

The above is the detailed content of Add carousels to your website using Slick.js. For more information, please follow other related articles on the PHP Chinese website!

jquery css css3 html 运算符循环 JS

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to create an array of multiple objects with multiple nested key-value pairs in JavaScript?Next article：How to create an array of multiple objects with multiple nested key-value pairs in JavaScript?

See more