Rumah > Artikel > hujung hadapan web > Bina Karusel Auto-Main Mudah dengan Kawalan Boleh Diklik Menggunakan Alpine.js

Bina Karusel Auto-Main Mudah dengan Kawalan Boleh Diklik Menggunakan Alpine.js

Mary-Kate Olsenasal: 2024-11-04 21:45:02457semak imbas

Build a Simple Auto-Play Carousel with Clickable Controls Using Alpine.js

Berikut ialah contoh langkah demi langkah untuk mencipta karusel ringkas menggunakan Alpine.js. Alpine.js ialah rangka kerja JavaScript ringan yang menyediakan kereaktifan dan boleh digunakan untuk membina komponen interaktif tanpa banyak JavaScript.

Dalam contoh ini, kami akan mencipta karusel asas yang memaparkan imej satu demi satu, dengan butang "Sebelumnya" dan "Seterusnya" untuk menavigasi melaluinya. Jom mulakan!

Langkah 1: Sediakan HTML dan Sertakan Alpine.js

Pertama, kami akan memasukkan Alpine.js dalam kepala fail HTML kami. Anda boleh melakukannya dengan menambah teg skrip berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js Carousel</title>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <style>
    .carousel {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 300px;
      overflow: hidden;
      position: relative;
    }
    .carousel img {
      width: 100%;
      transition: opacity 0.5s ease-in-out;
      opacity: 0;
    }
    .carousel img.active {
      opacity: 1;
    }
  </style>
</head>
<body>

Langkah 2: Struktur Komponen Karusel

Di dalam badan, buat div untuk komponen karusel dan mulakan dengan x-data untuk menentukan sifat dan kaedah Alpine.js.

<div x-data="carousel()" class="carousel">
  <!-- Previous Button -->
  <button @click="prev" class="absolute left-0 bg-gray-700 text-white px-3 py-2 rounded">Previous</button>

  <!-- Carousel Images -->
  <template x-for="(image, index) in images" :key="index">
    <img :src="image" :class="{'active': index === currentIndex}" alt="Carousel Image">
  </template>

  <!-- Next Button -->
  <button @click="next" class="absolute right-0 bg-gray-700 text-white px-3 py-2 rounded">Next</button>
</div>

Langkah 3: Tentukan Data dan Kaedah Alpine.js

Kini kami akan mentakrifkan fungsi karusel dalam komponen Alpine, menetapkan data awal dan kaedah untuk menavigasi imej.

<script>
  function carousel() {
    return {
      currentIndex: 0, // Track the index of the current image
      images: [
        'https://via.placeholder.com/600x300?text=Slide+1',
        'https://via.placeholder.com/600x300?text=Slide+2',
        'https://via.placeholder.com/600x300?text=Slide+3',
      ],
      interval: null,
      startAutoPlay() {
          this.interval = setInterval(() => {
              this.next();
          }, 3000); // Change every 3 seconds
      },
      stopAutoPlay() {
          clearInterval(this.interval);
      },
      // Method to go to the next image
      next() {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      },
      // Method to go to the previous image
      prev() {
        this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
      },
      init() {
          this.startAutoPlay();
      }
    };
  }
</script>

Penjelasan Komponen

Struktur HTML Karusel:
- Butang Sebelumnya: Apabila diklik, ia memanggil kaedah sebelumnya untuk menavigasi ke imej sebelumnya.
- Imej: Kami menggunakan x-for untuk menggelung imej dan mengikat atribut src. Pengikatan :class menggunakan kelas aktif pada imej semasa, menjadikannya kelihatan.
- Butang Seterusnya: Apabila diklik, ia memanggil kaedah seterusnya untuk menavigasi ke imej seterusnya.
Data dan Kaedah Alpine.js:
- currentIndex: Menjejaki imej semasa yang dipaparkan.
- imej: Tatasusunan yang mengandungi URL imej untuk karusel.
- startAutoPlay() dan stopAutoPlay(): Mulakan dan hentikan automain dengan selang 3 saat.
- next(): Kenaikan currentIndex. Jika ia melebihi bilangan imej, ia ditetapkan semula kepada permulaan.
- sebelumnya(): Penurunan semasaIndex. Jika ia berada di bawah sifar, ia membungkus ke imej terakhir.
- init(): Memulakan automain apabila karusel dimulakan.

Langkah 4: Gayakan Karusel

Kami menambah gaya CSS asas untuk karusel dan butang untuk kedudukan dan keterlihatan. Peralihan CSS memberikan imej kesan pudar.

Langkah 5: Auto-Main dan Kawalan Boleh Diklik

Automain: Automain menggunakan startAutoPlay() dalam init().
Kawalan Klik: Butang mencetuskan fungsi prev() dan next() untuk menavigasi slaid.

Ringkasan

Alpine.js digunakan untuk interaktiviti, menjadikan karusel ringan dan responsif.
Peralihan CSS mencipta kesan pudar apabila imej berubah.
Klik butang mencetuskan kaedah Alpine untuk navigasi mudah.

Contoh ini menyediakan kedua-dua fungsi automain dan kawalan boleh klik, menjadikan karusel interaktif. Beritahu saya jika anda mahu penyesuaian lanjut atau ciri tambahan!

Hubungi saya:@ LinkedIn dan semak Portfolio saya.

Sila berikan Projek GitHub saya bintang ⭐️

Kod Sumber

Atas ialah kandungan terperinci Bina Karusel Auto-Main Mudah dengan Kawalan Boleh Diklik Menggunakan Alpine.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Array define if for include auto using class Attribute JS number this github

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah menetapkan parameter dayValue Date.setFullYear() kepada 0 mengira hari terakhir dalam sebulan?Artikel seterusnya：Bagaimanakah menetapkan parameter dayValue Date.setFullYear() kepada 0 mengira hari terakhir dalam sebulan?

Artikel berkaitan

Lihat lagi