Maison > Article > interface Web > Ajoutez des carrousels à votre site Web à l'aide de Slick.js

Ajoutez des carrousels à votre site Web à l'aide de Slick.js

WBOYavant: 2023-09-04 20:37:021084parcourir

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

Dans ce tutoriel, nous montrerons comment utiliser Slick.js pour gérer les carrousels, puis les ajouter à votre site Web. Nous commencerons par créer un simple carrousel d'images et fournirons une fonctionnalité de défilement de base, puis ajouterons lentement différentes propriétés au carrousel et apporterons quelques modifications au carrousel en fonction de nos besoins.

Si vous essayez de créer un carrousel sans utiliser de bibliothèque, cela prendra beaucoup de temps. Pour réduire l'effort et pouvoir ajouter plusieurs types de carrousels avec des propriétés différentes, vous pouvez utiliser slick.js.

Slick.js est un plugin jQuery très connu et largement utilisé qui nous permet de créer des carrousels réactifs avec plusieurs propriétés et différents attributs.

Fonction de Slick

Slick.js est un choix parfait pour les carrousels pour plusieurs raisons. Certaines de ces raisons sont mentionnées ci-dessous -

Il fournit un carrousel entièrement réactif.
Le carrousel évolue avec son conteneur.
Il vous permet d'utiliser différents points d'arrêt pour des paramètres individuels.
C'est à vous de décider d'inclure ou non CSS3.
Prend en charge le glissement de la souris du bureau.
Il y a une boucle infinie.

Voici quelques-unes des fonctionnalités populaires que Slick nous offre par rapport à la manière traditionnelle de créer des carrousels.

Créez des carrousels avec Slick

Maintenant que nous connaissons Slick, il est temps d'apprendre à l'utiliser pour créer des carrousels. La première étape pour créer un carrousel est d'avoir un fichier HTML et un fichier CSS, car dans ces fichiers nous écrirons la logique de notre site Web, qui contiendra également le carrousel.

Exécutez la commande suivante -

touch index.html styles.css

Dans la commande ci-dessus, nous avons créé deux fichiers à savoir index.html et styles.css.

REMARQUE - Il est possible que index.html ne fonctionne pas sur votre ordinateur, veuillez utiliser la commande vi pour créer les deux fichiers.

Maintenant, écrivons le code HTML nécessaire pour créer un carrousel très basique.

index.html

Exemple

<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="Ajoutez des carrousels à votre site Web à laide de 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="Ajoutez des carrousels à votre site Web à laide de 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>

Instructions

D'accord, le plus dur est passé. Concentrons-nous sur la façon d'utiliser Slick dans le fichier index.html et sur les propriétés et fonctionnalités que nous utilisons.

La première chose lorsque l'on utilise Slick est de pouvoir l'installer ou le rendre disponible dans notre code, nous pouvons le faire de différentes manières. Le plus simple est d'utiliser un lien CDN, ce que j'ai fait dans le fichier html.

L'extrait de code suivant montre la présence de deux CDN dans la balise head du fichier index.html.

<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" />

Ensuite, nous devons également ajouter plus de CDN dans le HTML, mais pas dans la balise head mais à l'intérieur de la balise body. Considérez l'extrait de code présenté ci-dessous.

<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>

Dans l'extrait de code ci-dessus, nous avons importé la dépendance jQuery avec slick.min.js qui ajoute la fonctionnalité js.

Vient maintenant la partie amusante, nous devons utiliser Slick, pour cela vous pouvez voir que j'ai créé une classe appelée carousel qui a plusieurs div b> contenant différentes images avec une hauteur et une largeur spécifiées.

La classe nommée carousel est utilisée à l'intérieur de la balise script à l'intérieur de la balise body, où nous créons une fonction jQuery, puis utilisons l'opérateur « $ » et slick comme méthode où nous transmettons une propriété d'ensemble unique, qui est slidesToShow : 2, , cela indique à Slick que nous voulons afficher seulement 2 diapositives à la fois.

Maintenant, si nous exécutons le fichier index.html dans le navigateur, nous devrions pouvoir voir un carrousel d'images différentes avec 2 images affichées à un moment précis et nous pouvons également appuyer sur les boutons fléchés au centre gauche et droit de l'image La série d'images suivante s'affiche.

Ajoutez des attributs amusants à votre carrousel

De cette façon, notre carrousel de base est complet. Parlons maintenant de l'ajout de propriétés intéressantes pour modifier le comportement du carrousel, cela peut être fait en ajoutant une propriété set dans notre méthode ".slick({})".

Supposons que nous souhaitions également que l'utilisateur du carrousel dispose d'une option de point sur laquelle il peut cliquer puis accéder à une image spécifique, cela peut être fait en ajoutant l'attribut dots. Voir l'extrait de code ci-dessous.

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

Si nous remplaçons la méthode précédente ".ready()" par l'extrait de code affiché ci-dessus, nous pourrons alors voir un nombre différent de points apparaître sous le carrousel dans le navigateur.

Nous pouvons également modifier le type ou la catégorie des points en ajoutant l'attribut dotsClass comme suit :

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

Il existe plusieurs dotClasses disponibles, la plus populaire est -

Lisse
Carrousel lisse
Doux et actif

L'une des fonctionnalités les plus importantes des carrousels que vous pouvez voir dans différents carrousels de votre site Web est la fonctionnalité Autoplay où vous pouvez voir le carrousel s'exécuter automatiquement sans avoir à cliquer sur un bouton, puis passer à l'image ou au div suivant, , cela peut être facilement fait dans Slick.js avec l'aide de la propriété autoPlay. Voir l'extrait de code ci-dessous.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css css3 html 运算符循环 JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer un tableau de plusieurs objets avec plusieurs paires clé-valeur imbriquées en JavaScript ?Article suivant：Comment créer un tableau de plusieurs objets avec plusieurs paires clé-valeur imbriquées en JavaScript ?

Articles Liés

Voir plus