Heim > Artikel > Web-Frontend > Fügen Sie mit Slick.js Karussells zu Ihrer Website hinzu

Fügen Sie mit Slick.js Karussells zu Ihrer Website hinzu

WBOYnach vorne: 2023-09-04 20:37:021175Durchsuche

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

In diesem Tutorial zeigen wir, wie Sie mit Slick.js Karussells verwalten und diese dann Ihrer Website hinzufügen. Wir beginnen damit, ein einfaches Karussell mit Bildern zu erstellen und grundlegende Bildlauffunktionen bereitzustellen. Anschließend fügen wir dem Karussell langsam verschiedene Eigenschaften hinzu und nehmen je nach Bedarf einige Änderungen am Karussell vor.

Wenn Sie versuchen, ein Karussell zu erstellen, ohne eine Bibliothek zu verwenden, wird dies sehr zeitaufwändig sein. Um den Aufwand zu reduzieren und mehrere Karusselltypen mit unterschiedlichen Eigenschaften hinzufügen zu können, können Sie slick.js verwenden.

Slick.js ist ein sehr bekanntes und weit verbreitetes jQuery-Plugin, mit dem wir responsive Karussells mit mehreren Eigenschaften und unterschiedlichen Attributen erstellen können.

Funktion von Slick

Slick.js ist aus mehreren Gründen die perfekte Wahl für Karussells. Einige dieser Gründe sind unten aufgeführt -

Es bietet ein vollständig reaktionsfähiges Karussell.
Das Karussell skaliert mit seinem Behälter.
Es ermöglicht Ihnen, unterschiedliche Haltepunkte für individuelle Einstellungen zu verwenden.
Ob Sie CSS3 einbinden oder nicht, liegt bei Ihnen.
Unterstützt das Ziehen mit der Desktop-Maus.
Es gibt eine Endlosschleife.

Dies sind einige der beliebten Funktionen, die uns Slick im Vergleich zur herkömmlichen Art der Karussellerstellung bietet.

Erstellen Sie Karussells mit Slick

Da wir nun mit Slick vertraut sind, ist es an der Zeit zu lernen, wie man damit Karussells erstellt. Der erste Schritt beim Erstellen eines Karussells besteht darin, eine HTML-Datei und eine CSS-Datei zu haben, denn in diese Dateien schreiben wir die Logik für unsere Website, die auch das Karussell enthalten wird.

Führen Sie den folgenden Befehl aus -

touch index.html styles.css

Im obigen Befehl haben wir zwei Dateien erstellt, nämlich index.html und style.css.

HINWEIS – Möglicherweise läuft index.html nicht auf Ihrem Computer. Bitte verwenden Sie den Befehl vi, um beide Dateien zu erstellen.

Jetzt schreiben wir den HTML-Code, der zum Erstellen eines sehr einfachen Karussells erforderlich ist.

index.html

Beispiel

<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="Fügen Sie mit Slick.js Karussells zu Ihrer Website hinzu"> 
         </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="Fügen Sie mit Slick.js Karussells zu Ihrer Website hinzu0">          </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>

Anleitung

Okay, der schwierige Teil ist vorbei. Konzentrieren wir uns auf die Verwendung von Slick in der Datei index.html und auf die Eigenschaften und Funktionen, die wir verwenden.

Das erste, was Sie bei der Verwendung von Slick tun müssen, ist die Möglichkeit, es zu installieren oder in unserem Code verfügbar zu machen. Dies können wir auf unterschiedliche Weise tun. Der einfachste Weg ist die Verwendung eines CDN-Links, was ich in der html-Datei getan habe.

Der folgende Codeausschnitt zeigt das Vorhandensein von zwei CDNs im Head-Tag der Datei 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" />

Dann müssen wir auch mehr CDN im HTML hinzufügen, aber nicht im head, sondern im body-Tag. Betrachten Sie den unten gezeigten Codeausschnitt.

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

Im obigen Codeausschnitt haben wir die jQuery-Abhängigkeit zusammen mit slick.min.js importiert, wodurch js-Funktionalität hinzugefügt wird.

Jetzt kommt der spaßige Teil: Wir müssen Slick verwenden. Sie können sehen, dass ich dafür eine Klasse namens carousel erstellt habe, die mehrere div b> enthält, die verschiedene Bilder mit angegebener Höhe und Breite enthalten.

Die Klasse mit dem Namen carousel wird innerhalb des Skript-Tags innerhalb des Body-Tags verwendet, wo wir eine jQuery-Funktion erstellen und dann den „$“-Operator und slick als Methode verwenden, wobei wir eine einzelne Mengeneigenschaft übergeben, nämlich slidesToShow: 2, , es teilt Slick mit, dass wir nur 2 Folien gleichzeitig anzeigen möchten.

Wenn wir nun die Datei index.html im Browser ausführen, sollten wir in der Lage sein, ein Karussell mit verschiedenen Bildern zu sehen, wobei 2 Bilder zu einem bestimmten Zeitpunkt angezeigt werden, und wir können auch dazu übergehen, die Pfeiltasten in der Mitte links und rechts zu drücken des Bildes Der nächste Bildsatz wird angezeigt.

Fügen Sie Ihrem Karussell lustige Attribute hinzu

Damit ist unser Grundkarussell komplett. Lassen Sie uns nun über das Hinzufügen interessanter Eigenschaften sprechen, um das Verhalten des Karussells zu ändern. Dies kann durch Hinzufügen einer Set-Eigenschaft in unserer Methode ".slick({})" erfolgen.

Angenommen, wir möchten auch, dass der Benutzer des Karussells eine Punktoption hat, auf die er klicken und dann zu einem bestimmten Bild gehen kann. Dies kann durch Hinzufügen des Attributs Punkte erreicht werden. Sehen Sie sich den unten gezeigten Codeausschnitt an.

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

Wenn wir die vorherige Methode ".ready()" durch das oben gezeigte Code-Snippet ersetzen, können wir sehen, dass unterhalb des Karussells im Browser eine andere Anzahl von Punkten erscheint.

Wir können den Typ oder die Kategorie der Punkte auch ändern, indem wir das Attribut dotsClass wie folgt hinzufügen:

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

Es stehen mehrere dotClasses zur Verfügung, die beliebteste ist -

Glatt
Glattes Karussell
Glatt und aktiv

Eine der wichtigsten Funktionen von Karussells, die Sie möglicherweise in verschiedenen Karussells auf Ihrer Website sehen, ist die Autoplay-Funktion, mit der Sie sehen können, wie das Karussell automatisch läuft, ohne auf eine Schaltfläche klicken und dann zum nächsten Bild oder div wechseln zu müssen. , dies kann einfach mit Hilfe der Eigenschaft autoPlay in Slick.js erfolgen. Sehen Sie sich den unten gezeigten Codeausschnitt an.

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

Das obige ist der detaillierte Inhalt vonFügen Sie mit Slick.js Karussells zu Ihrer Website hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css css3 html 运算符循环 JS

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich in JavaScript ein Array aus mehreren Objekten mit mehreren verschachtelten Schlüssel-Wert-Paaren?Nächster Artikel：Wie erstelle ich in JavaScript ein Array aus mehreren Objekten mit mehreren verschachtelten Schlüssel-Wert-Paaren?

In Verbindung stehende Artikel

Mehr sehen