Rumah > Artikel > hujung hadapan web > Tambahkan karusel pada tapak web anda menggunakan Slick.js

Tambahkan karusel pada tapak web anda menggunakan Slick.js

WBOYke hadapan: 2023-09-04 20:37:021173semak imbas

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

Dalam tutorial ini, kami akan menunjukkan cara menggunakan Slick.js untuk mengendalikan karusel dan kemudian menambahkannya ke tapak web anda. Kami akan bermula dengan mencipta karusel imej ringkas dengan fungsi tatal asas dan kemudian perlahan-lahan menambah sifat berbeza pada karusel dan membuat beberapa perubahan pada karusel berdasarkan keperluan kami.

Jika anda cuba mencipta karusel tanpa menggunakan mana-mana perpustakaan, ia akan memakan masa yang lama. Untuk mengurangkan usaha dan dapat menambah berbilang jenis karusel dengan sifat yang berbeza, anda boleh menggunakan slick.js.

Slick.js ialah pemalam jQuery yang sangat terkenal dan digunakan secara meluas yang membolehkan kami mencipta karusel responsif dengan berbilang sifat dan sifat yang berbeza.

Ciri licin

Slick.js ialah pilihan yang sesuai untuk karusel atas beberapa sebab. Beberapa sebab ini disebutkan di bawah -

Ia menyediakan karusel responsif sepenuhnya.
Karusel bersisik dengan bekasnya.
Ia membolehkan anda menggunakan titik putus yang berbeza untuk tetapan individu.
Sama ada untuk memasukkan CSS3 atau tidak terpulang kepada anda.
Sokong penyeretan tetikus desktop.
Ada gelung tak terhingga.

Ini adalah beberapa ciri popular yang Slick tawarkan kepada kami berbanding cara tradisional untuk mencipta karusel.

Buat karusel dengan Slick

Sekarang kita sudah biasa dengan Slick, tiba masanya untuk mempelajari cara menggunakannya untuk membuat karusel. Langkah pertama dalam mencipta karusel ialah mempunyai fail HTML dan fail CSS, kerana dalam fail ini kami akan menulis logik untuk tapak web kami, yang juga akan mengandungi karusel.

Jalankan arahan berikut -

touch index.html styles.css

Dalam arahan di atas, kami mencipta dua fail iaitu index.html dan styles.css.

NOTA - Mungkin index.html mungkin tidak berjalan pada mesin anda, sila gunakan arahan vi untuk mencipta kedua-dua fail.

Sekarang, mari tulis kod HTML yang diperlukan untuk mencipta karusel yang sangat asas.

index.html

Contoh

<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="Tambahkan karusel pada tapak web anda menggunakan 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="Tambahkan karusel pada tapak web anda menggunakan 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>

Arahan

Baiklah, bahagian yang sukar sudah berakhir. Mari fokus pada cara menggunakan Slick dalam fail index.html dan sifat serta ciri yang kami gunakan.

Perkara pertama apabila menggunakan Slick ialah dapat memasangnya atau menyediakannya dalam kod kami, kami boleh melakukannya dengan cara yang berbeza. Cara paling mudah ialah menggunakan pautan CDN, iaitu apa yang saya lakukan dalam fail html.

Coretan kod berikut menunjukkan kehadiran dua CDN dalam teg kepala fail 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" />

Maka kita juga perlu menambah lebih banyak CDN dalam HTML, tetapi bukan dalam kepala tetapi di dalam tag badan. Pertimbangkan coretan kod yang ditunjukkan di bawah.

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

Dalam coretan di atas, kami mengimport kebergantungan jQuery bersama-sama dengan slick.min.js yang menambahkan fungsi js.

Kini datang bahagian yang menyeronokkan, kita perlu menggunakan Slick, untuk ini anda dapat melihat bahawa saya mencipta kelas yang dipanggil carousel yang mempunyai berbilang div b> yang mengandungi imej berbeza dengan ketinggian dan lebar yang ditentukan.

Kelas bernama carousel digunakan di dalam teg skrip di dalam teg badan, di mana kita mencipta fungsi jQuery dan kemudian menggunakan pengendali "$" dan slick sebagai kaedah di mana kita melepasi harta set tunggal, iaitu slidesToShow: 2, , ia memberitahu Slick bahawa kami hanya mahu memaparkan 2 slaid pada satu masa.

Sekarang jika kita menjalankan fail index.html dalam penyemak imbas kita sepatutnya dapat melihat karusel imej yang berbeza dengan 2 imej dipaparkan pada masa tertentu dan kita juga boleh bergerak untuk menekan butang anak panah di tengah kiri dan kanan daripada imej Set imej seterusnya dipaparkan.

Tambahkan atribut yang menyeronokkan pada karusel anda

Dengan cara ini, karusel asas kami lengkap. Sekarang mari kita bincangkan tentang menambah sifat menarik untuk menukar tingkah laku karusel, ini boleh dilakukan dengan menambahkan sifat set dalam kaedah ".slick({})" kami.

Andaikan kami juga mahu pengguna karusel mempunyai pilihan titik di mana dia boleh mengklik dan kemudian pergi ke imej tertentu, ini boleh dilakukan dengan menambah atribut dots. Lihat coretan kod yang ditunjukkan di bawah.

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

Jika kita menggantikan kaedah ".ready()" sebelumnya dengan coretan kod yang ditunjukkan di atas, maka kita akan dapat melihat bilangan titik yang berbeza muncul di bawah karusel dalam penyemak imbas.

Kami juga boleh menukar jenis atau kategori titik dengan menambah atribut dotsClass seperti berikut:

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

Terdapat berbilang dotClasses tersedia, yang paling popular ialah -

Licin
Karusel Licin
Licin dan aktif

Salah satu ciri paling penting karusel yang mungkin anda lihat dalam karusel berbeza di tapak web anda ialah ciri Automain di mana anda boleh melihat karusel berjalan secara automatik tanpa perlu mengklik butang dan kemudian beralih ke imej seterusnya atau div, , ini boleh dilakukan dengan mudah dengan bantuan harta autoPlay dalam Slick.js. Lihat coretan kod yang ditunjukkan di bawah.

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

Atas ialah kandungan terperinci Tambahkan karusel pada tapak web anda menggunakan Slick.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css css3 html 运算符循环 JS

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk membuat tatasusunan berbilang objek dengan berbilang pasangan nilai kunci bersarang dalam JavaScript?Artikel seterusnya：Bagaimana untuk membuat tatasusunan berbilang objek dengan berbilang pasangan nilai kunci bersarang dalam JavaScript?

Artikel berkaitan

Lihat lagi