다음은 Alpine.js를 사용하여 간단한 캐러셀을 만드는 단계별 예입니다. Alpine.js는 반응성을 제공하고 많은 JavaScript 없이 대화형 구성 요소를 구축하는 데 사용할 수 있는 경량 JavaScript 프레임워크입니다.
이 예에서는 이미지를 한 번에 하나씩 표시하고 이미지를 탐색할 수 있는 '이전' 및 '다음' 버튼을 사용하는 기본 캐러셀을 만듭니다. 시작해 보세요!
1단계: HTML 설정 및 Alpine.js 포함
먼저 HTML 파일의 헤드에 Alpine.js를 포함하겠습니다. 다음 스크립트 태그를 추가하면 됩니다:
Alpine.js Carousel
2단계: 캐러셀 구성 요소 구조
본문 내부에서 캐러셀 구성요소에 대한 div를 생성하고 x-data로 초기화하여 Alpine.js 속성과 메서드를 정의합니다.
3단계: Alpine.js 데이터 및 방법 정의
이제 Alpine 구성 요소에서 캐러셀 기능을 정의하고 이미지 탐색을 위한 초기 데이터와 방법을 설정하겠습니다.
구성품 설명
회전식 HTML 구조:
이전 버튼: 클릭하면 이전 이미지로 이동하기 위해 prev 메소드를 호출합니다.
이미지: x-for를 사용하여 이미지를 반복하고 src 속성을 바인딩합니다. :class 바인딩은 활성 클래스를 현재 이미지에 적용하여 표시되도록 합니다.
다음 버튼: 클릭하면 다음 이미지로 이동하기 위해 다음 메소드를 호출합니다.
Alpine.js 데이터 및 방법:
현재 인덱스: 현재 표시되는 이미지를 추적합니다.
이미지: 캐러셀 이미지의 URL을 포함하는 배열입니다.
startAutoPlay() 및 stopAutoPlay(): 3초 간격으로 자동 재생을 시작하고 중지합니다.
next(): currentIndex를 증가시킵니다. 이미지 개수를 초과할 경우 처음으로 초기화됩니다.
prev(): currentIndex를 감소시킵니다. 0 아래로 내려가면 마지막 이미지로 돌아갑니다.
init(): 캐러셀이 초기화되면 자동 재생을 시작합니다.
4단계: 캐러셀 스타일 지정
캐러셀에 대한 기본 CSS 스타일과 위치 지정 및 가시성을 위한 버튼을 추가했습니다. CSS 전환은 이미지에 페이드인 효과를 줍니다.
5단계: 자동 재생 및 클릭 가능한 컨트롤
자동 재생: init()에서 startAutoPlay()를 사용하여 자동 재생됩니다.
컨트롤 클릭: 버튼은 슬라이드를 탐색하기 위해 prev() 및 next() 기능을 트리거합니다.
요약
Alpine.js는 대화형 작업에 사용되어 캐러셀을 가볍고 반응성이 뛰어납니다.
CSS 전환은 이미지가 변경될 때 페이드 효과를 만듭니다.
버튼 클릭으로 쉽게 탐색할 수 있도록 알파인 방식이 실행됩니다.
이 예는 자동 재생 기능과 클릭 가능한 컨트롤을 모두 제공하여 캐러셀을 대화형으로 만듭니다. 추가 맞춤설정이나 추가 기능을 원하시면 알려주세요!
저와 연결하세요:@ LinkedIn으로 내 포트폴리오를 확인해 보세요.
내 GitHub 프로젝트에 별점을 주세요 ⭐️
소스 코드
릴리스 선언문
이 기사는 https://dev.to/mdarifulhaque/build-a-simple-auto-play-carousel-with-clickable-controls-using-alpinejs-21kh?1 에서 복제됩니다. 침해가 있는 경우에는 Study_golang에 문의하세요. @163.com 삭제
MySQL을 사용하여 오늘 생일을 가진 사용자를 식별하는 방법MySQL을 사용하여 오늘이 사용자의 생일인지 확인하려면 생일이 일치하는 모든 행을 찾는 것이 포함됩니다. 오늘 날짜. 이는 UNIX 타임스탬프로 저장된 생일을 오늘 날짜와 비교하는 간단한 MySQL 쿼리를 ...
채팅 애플리케이션, 실시간 알림, 협업 도구 등 실시간 업데이트가 필요한 앱을 구축하려면 기존 HTTP보다 더 빠르고 대화형인 통신 방법이 필요합니다. 이것이 바로 WebSockets가 필요한 곳입니다! 오늘은 Go에서 WebSocket을 사용하여 애플리케이션에 실시간...
MySQL이 잘못 구성됨: 상대 경로 문제Django에서 python prepare.py runserver를 실행할 때 다음 오류가 발생할 수 있습니다:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Libra...
PHP에서 연관 배열 결합PHP에서는 두 개의 연관 배열을 단일 배열로 결합하는 것이 일반적인 작업입니다. 다음 요청을 고려하십시오.문제 설명:제공된 코드는 두 개의 연관 배열 $array1 및 $array2를 정의합니다. 목표는 두 배열의 모든 키-값 쌍을 통합하는 ...
Bootstrap 4 베타: 열 오프셋 제거 및 복원Bootstrap 4는 베타 1 릴리스에서 열 오프셋 방식에 중요한 변경 사항을 도입했습니다. 열이 오프셋되었습니다. 그러나 후속 베타 2 릴리스에서는 이러한 변경 사항이 취소되었습니다.offset-md-*에서 ml-...
Java에서 프로세스 실행Java에서 프로세스를 시작하는 기능은 시스템 명령을 실행하고 다른 애플리케이션과 상호 작용하는 데 중요한 기능입니다. 프로세스를 시작하기 위해 Java는 .Net System.Diagnostics.Process.Start 메서드에 해당하는 메...
C의 여러 줄 문자열 리터럴 C에서 여러 줄 문자열 리터럴을 정의하는 것은 Perl과 같은 다른 언어에서처럼 간단하지 않습니다. 그러나 이를 달성하기 위해 사용할 수 있는 몇 가지 기술이 있습니다.연결된 문자열 리터럴한 가지 방법은 C의 인접한 문자열 리터럴이 컴파일러...
고유 레코드를 효과적으로 피벗피벗 쿼리는 데이터를 표 형식으로 변환하여 간편한 데이터 분석을 가능하게 하는 데 중요한 역할을 합니다. 그러나 고유 레코드를 처리할 때 피벗 쿼리의 기본 동작에 문제가 있을 수 있습니다.문제: 고유 값 무시다음 표를 고려하세요.------...
C 및 C의 함수에 배열 전달 질문:C와 C를 수행하는 이유 C 컴파일러는 int dis(char a[1])와 같은 함수 시그니처에서 배열 길이 선언을 허용합니다. 적용됩니까?답변:C 및 C에서 함수에 배열을 전달하는 데 사용되는 구문은 첫 번째 요소에 대한 포인터 전...
효율적인 자동 완성 검색을 위해 MySQL에서 악센트 제거대량의 지명 데이터베이스를 관리할 때는 정확성과 효율성을 보장하는 것이 중요합니다. 데이터 검색. 장소 이름의 악센트는 자동 완성 기능을 사용할 때 문제가 될 수 있습니다. 이 문제를 해결하려면 다음과 같은 자연...
SQL에서 복합 외래 키 구현일반적인 데이터베이스 설계 중 하나는 복합 키를 사용하여 테이블 간의 관계를 설정하는 것입니다. 복합 키는 테이블의 레코드를 고유하게 식별하는 여러 열의 조합입니다. 이 시나리오에는 튜토리얼의 복합 고유 키를 그룹의 필드에 연결해야 하는 튜...
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오.
최대한 빨리 처리해 드리겠습니다.
