چگونه یک کاروسل ری اکت با نمایش جزئی تصاویر بعدی/قبلی بسازیم؟

یکی از جذاب‌ترین ویژگی‌هایی که می‌توانید به وب‌سایت یا برنامه‌تان اضافه کنید، استفاده از کاروسل یا گردونه تصاویر است. کاروسل به کاربر اجازه می‌دهد چندین تصویر یا آیتم را ورق بزند و محتوای بیشتری را مشاهده کند. اما ساخت کاروسل‌های جذاب و کاربرپسند نیازمند آشنایی با تکنیک‌های پیشرفته‌ای مثل نمایش جزئی تصاویر بعدی و قبلی است.

در اینجا می‌خواهیم با استفاده از کتابخانه محبوب ری‌اکت، یک کاروسل طراحی کنیم که به صورت دینامیک تصاویر بعدی و قبلی را به شکلی جزئی نمایش دهد. هدف از چنین کاری، جلب بیشتر توجه کاربران و ارائه تجربه کاربری بهتری است.

برای شروع، ابتدا باید یک پروژه ری‌اکت جدید ایجاد کنیم و مستندات و مجموعه‌های کتابخانه ری‌اکت را در اختیار بگیریم. سپس، با استفاده از CSS، لازم است کلاس‌هایی طراحی کنیم که برخی از حرفه‌ای‌ترین قالب‌های کاروسل را به نمایش گذارد. همچنین با استفاده از قابلیت‌های جاوا اسکریپت، رفتار داینامیک به این کاروسل اضافه کنیم تا تصاویر به صورت صحیح جابجا شوند.

اکنون می‌خواهیم بخشی از کد نمونه‌ را که برای ایجاد چنین کاروسلی نوشته‌ایم، ارائه دهیم. کد شامل استفاده از ref و state های React برای جابجایی بین تصاویر و مدیریت وضعیت کاروسل می‌شود.

import React, { useRef, useState } from 'react';
import './Carousel.css';

const Carousel = ({ items }) => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const ref = useRef(null);

    const handleNext = () => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
    };

    const handlePrev = () => {
        setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
    };

    return (
        <div className="carousel-container" ref={ref}>
            <button onClick={handlePrev}>Prev</button>
            <div className="carousel-content">
                <div className="carousel-item" style={{ transform: `translateX(-${currentIndex * 100}%)` }}>
                    {items.map((item, idx) => (
                        <div className="item" key={idx}>{item}</div>
                    ))}
                </div>
            </div>
            <button onClick={handleNext}>Next</button>
        </div>
    );
};

export default Carousel;

توضیح خط به خط کد:

import React, { useRef, useState } from 'react';
اول از همه، کامپوننت‌های React را وارد کرده‌ایم که برای ایجاد حالت‌ها و ارجاع به ایتم‌های DOM مورد نیازند.

const Carousel = ({ items }) => {
اینجا یک کامپوننت تابعی تعریف کرده‌ایم که یک آرایه از آیتم‌ها را به عنوان ورودی می‌پذیرد.

const [currentIndex, setCurrentIndex] = useState(0);
یک حالت برای نمایش شاخص فعلی آیتم تعریف کرده‌ایم که با مقدار پیش‌فرض 0 آغاز می‌شود.

const ref = useRef(null);
ایجاد یک ref برای دسترسی به عنصر DOM کاروسل.

const handleNext = () => { ... }
تابعی که شاخص را برای دیدن تصویر بعدی به‌روز رسانی می‌کند.

const handlePrev = () => { ... }
تابعی که شاخص را برای دیدن تصویر قبلی به‌روز رسانی می‌کند.

<div className="carousel-container" ref={ref}>
یک عنصر div که شامل تمام محتوای کاروسل است و به عنوان عنصر برجسته مورد استفاده قرار می‌گیرد.

<button onClick={handlePrev}>Prev</button>
دکمه‌ای برای مشاهده تصویر قبلی.

<div className="carousel-content">...
این div شامل محتویات یا آیتم‌های کاروسل است و از طریق CSS جابجا می‌شود.

style={{ transform: `translateX(-${currentIndex * 100}%)` }}
از این ویژگی برای جابجایی محتوای کاروسل بر اساس شاخص فعلی استفاده شده است.

<button onClick={handleNext}>Next</button>
دکمه‌ای برای مشاهده تصویر بعدی.