Image Slider - Copy this React, Tailwind Component to your project
Import React, { useState } from 'react'; import images from "../asset"; const TheaterSlider = () => { // Dữ liệu các ảnh trong slider const imageTheater = [ images.Theater, images.Theater1, images.Theater2, ]; // Trạng thái hiện tại của ảnh const [currentIndex, setCurrentIndex] = useState(0); // Hàm chuyển tới ảnh tiếp theo const nextSlide = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % imageTheater.length); }; // Hàm quay lại ảnh trước đó const prevSlide = () => { setCurrentIndex( (prevIndex) => (prevIndex 1 + imageTheater.length) % imageTheater.length ); }; return ( <div className="relative w full max w 3xl mx auto overflow hidden rounded lg"> {/* Wrapper cho các ảnh */} <div className="flex items center justify center w full relative"> {/* Ảnh bên trái */} <div className="relative w 1/3 overflow hidden"> <img src={imageTheater[(currentIndex 1 + imageTheater.length) % imageTheater.length]} alt={`Prev`} className="w full h auto object cover rounded lg shadow md" style={{ transform: 'scale(0.8)', // Thu nhỏ ảnh trái opacity: 0.6, position: 'absolute', left: ' 20%', // Dịch ảnh sang trái transition: 'transform 0.5s ease', zIndex: 1, // Đảm bảo ảnh trái không bị che }} /> {/* Mũi tên quay lại */} <button className="absolute left 4 top 1/2 transform translate y 1/2 text white text 4xl bg black bg opacity 50 p 3 rounded full hover:bg opacity 70 focus:outline none transition all z 10" onClick={prevSlide} > ❮ </button> </div> {/* Ảnh chính giữa */} <div className="relative w 1/3"> <img src={imageTheater[currentIndex]} alt={`Current`} className="w full h auto object cover rounded lg shadow md" style={{ transform: 'scale(1)', // Ảnh chính giữ kích thước bình thường opacity: 1, transition: 'transform 0.5s ease', // Mượt mà khi chuyển zIndex: 2, // Đảm bảo ảnh chính luôn hiển thị trên cùng }} /> </div> {/* Ảnh bên phải */} <div className="relative w 1/3 overflow hidden"> <img src={imageTheater[(currentIndex + 1) % imageTheater.length]} alt={`Next`} className="w full h auto object cover rounded lg shadow md" style={{ transform: 'scale(0.8)', // Thu nhỏ ảnh phải opacity: 0.6, position: 'absolute', right: ' 20%', // Dịch ảnh sang phải transition: 'transform 0.5s ease', zIndex: 1, // Đảm bảo ảnh phải không bị che }} /> {/* Mũi tên tiếp theo */} <button className="absolute right 4 top 1/2 transform translate y 1/2 text white text 4xl bg black bg opacity 50 p 3 rounded full hover:bg opacity 70 focus:outline none transition all z 10" onClick={nextSlide} > ❯ </button> </div> </div> </div> ); }; export { TheaterSlider };
