Alpine.js를 사용하여 클릭 가능한 컨트롤이 포함된 간단한 자동 재생 캐러셀 구축-JS 튜토리얼-php.cn

Alpine.js를 사용하여 클릭 가능한 컨트롤이 포함된 간단한 자동 재생 캐러셀 구축

Mary-Kate Olsen

풀어 주다： 2024-11-04 21:45:02

원래의

511명이 탐색했습니다.

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

다음은 Alpine.js를 사용하여 간단한 캐러셀을 만드는 단계별 예입니다. Alpine.js는 반응성을 제공하고 많은 JavaScript 없이 대화형 구성 요소를 구축하는 데 사용할 수 있는 경량 JavaScript 프레임워크입니다.

이 예에서는 이미지를 탐색할 수 있는 '이전' 및 '다음' 버튼을 사용하여 이미지를 한 번에 하나씩 표시하는 기본 캐러셀을 만듭니다. 시작해 보세요!

1단계: HTML 설정 및 Alpine.js 포함

먼저 HTML 파일의 헤드에 Alpine.js를 포함하겠습니다. 다음 스크립트 태그를 추가하면 됩니다.

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

로그인 후 복사

2단계: 캐러셀 구성 요소 구조

본문 내부에서 캐러셀 구성요소에 대한 div를 생성하고 x-data로 초기화하여 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>

로그인 후 복사

3단계: Alpine.js 데이터 및 방법 정의

이제 Alpine 구성 요소에서 캐러셀 기능을 정의하고 이미지 탐색을 위한 초기 데이터와 방법을 설정하겠습니다.

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

로그인 후 복사

구성품 설명

회전식 HTML 구조:
- 이전 버튼: 클릭 시 prev 메소드를 호출하여 이전 이미지로 이동합니다.
- 이미지: x-for를 사용하여 이미지를 반복하고 src 속성을 바인딩합니다. :class 바인딩은 활성 클래스를 현재 이미지에 적용하여 표시되도록 합니다.
- 다음 버튼: 클릭 시 다음 이미지로 이동하기 위해 다음 메소드를 호출합니다.
Alpine.js 데이터 및 방법:
- currentIndex: 현재 표시되는 이미지를 추적합니다.
- images: 캐러셀 이미지의 URL을 포함하는 배열입니다.
- startAutoPlay() 및 stopAutoPlay(): 3초 간격으로 자동 재생을 시작하고 중지합니다.
- next(): currentIndex를 증가시킵니다. 이미지 개수를 초과할 경우 처음으로 초기화됩니다.
- prev(): currentIndex를 감소시킵니다. 0 이하로 내려가면 마지막 이미지까지 순환됩니다.
- init(): 캐러셀이 초기화되면 자동 재생을 시작합니다.