DEV Community

Cover image for Build a Simple Auto-Play Carousel with Clickable Controls Using Alpine.js
MD ARIFUL HAQUE
MD ARIFUL HAQUE

Posted on

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

#alpinejs #carousel #javascript #tutorial

Here's a step-by-step example of creating a simple carousel using Alpine.js. Alpine.js is a lightweight JavaScript framework that provides reactivity and can be used to build interactive components without a lot of JavaScript.

In this example, we'll create a basic carousel that displays images one at a time, with "Previous" and "Next" buttons to navigate through them. Let's get started!

Step 1: Set Up HTML and Include Alpine.js

First, we’ll include Alpine.js in the head of our HTML file. You can do this by adding the following script tag:

<!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>
Enter fullscreen mode Exit fullscreen mode

Step 2: Carousel Component Structure

Inside the body, create a div for the carousel component and initialize it with x-data to define Alpine.js properties and methods.

<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>
Enter fullscreen mode Exit fullscreen mode

Step 3: Define the Alpine.js Data and Methods

Now we’ll define the carousel functionality in an Alpine component, setting the initial data and methods for navigating the images.

<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>
Enter fullscreen mode Exit fullscreen mode

Explanation of the Component

  1. Carousel HTML Structure:

    • Previous Button: When clicked, it calls the prev method to navigate to the previous image.
    • Images: We use x-for to loop through images and bind the src attribute. The :class binding applies the active class to the current image, making it visible.
    • Next Button: When clicked, it calls the next method to navigate to the next image.

  2. Alpine.js Data and Methods:

    • currentIndex: Tracks the current image being displayed.
    • images: An array containing the URLs of the images for the carousel.
    • startAutoPlay() and stopAutoPlay(): Start and stop the auto-play with a 3-second interval.
    • next(): Increments currentIndex. If it exceeds the number of images, it resets to the beginning.
    • prev(): Decrements currentIndex. If it goes below zero, it wraps around to the last image.
    • init(): Starts the auto-play when the carousel is initialized.

Step 4: Style the Carousel

We added basic CSS styles for the carousel and buttons for positioning and visibility. The CSS transitions give the images a fade-in effect.

Step 5: Auto-Play and Clickable Controls

  • Auto-play: Auto-plays using startAutoPlay() in init().
  • Click Controls: Buttons trigger prev() and next() functions to navigate slides.

Summary

  • Alpine.js is used for interactivity, making the carousel lightweight and responsive.
  • CSS transitions create a fade effect as images change.
  • Button clicks trigger Alpine methods for easy navigation.

This example provides both auto-play functionality and clickable controls, making the carousel interactive. Let me know if you'd like further customization or additional features!

Connect with me:@ LinkedIn and checkout my Portfolio.

Please give my GitHub Projects a star ⭐️

Source Code

Top comments (0)

Read next

wafa_bergaoui profile image

Optimizing React Components with useMemo and useCallback

Wafa Bergaoui -

travislramos profile image

The Resurgence of Server-Side Rendering in the JavaScript Era

Travis Ramos -

mrzaizai2k profile image

TIL: Block tabs and Get IP in Javascript

Mai Chi Bao -

fahimfba profile image

How to Unsave All Saved Posts on Facebook in a Few Simple Steps

Md. Fahim Bin Amin -