کج کردن کارت‌ها و اضافه کردن سایه‌ها در Slick Slider با ری‌اکت

چگونه کارت‌های اول و سوم را در Slick Slider کج کنیم و سایه‌ها را در ری‌اکت اضافه کنیم؟

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

برای شروع، ابتدا باید مطمئن شویم که Slick Slider به درستی در پروژه شما نصب شده است. اگر هنوز آن را نصب نکرده‌اید، می‌توانید با استفاده از npm آن را به پروژه خود اضافه کنید. اصولا این کار با یک خط دستور آسان انجام می‌شود و می‌توانید نسخه جدید آن را مستقیماً نصب کنید.

سپس، ما کمی کد CSS برای کج کردن کارت‌ها و اضافه کردن سایه‌ها به آن‌ها نیاز داریم. می‌توانیم از ترنسفورم و شادو در CSS استفاده کنیم. می‌توانید با اضافه کردن کلاس‌های مربوطه به کارت‌های اول و سوم، به راحتی این تغییرات را اعمال کنید.

در نهایت، به کد React می‌رسیم. ما یک وضعیت برای کنترل اسلایدها خواهیم داشت و با استفاده از آن وضعیت می‌توانیم کلاس‌های مخصوص را به کارت‌ها اعمال کنیم. حالا بیایید کدهای لازم را به شما نشان دهیم.

import React from 'react';
import Slider from "react-slick";
import './styles.css';

const CardSlider = () => {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 5,
        slidesToScroll: 1
    };

    return (
        
            {Array.from({ length: 5 }, (_, index) => (
                
 
                    
کارت {index + 1}

                

            ))}
        
    );
};

export default CardSlider;

توضیح کد

import React from 'react';
این خط React را به فایل ما وارد می‌کند، که نیاز است برای ساخت کامپوننت‌ها.

import Slider from "react-slick";
این خط ماژول Slick Slider را به پروژه ما وارد می‌کند.

import './styles.css';
ما یک فایل CSS برای استایل‌دهی طراحی خود وارد می‌کنیم.

const CardSlider = () => {
ما یک تابع کامپوننت به نام CardSlider تعریف می‌کنیم.

const settings = {
ما تنظیمات Slick Slider را در اینجا مشخص می‌کنیم.

return (
این خط نشان می‌دهد که از کجا شروع به تولید محتوای JSX می‌کنیم.

<Slider {...settings}>
ما Slider با تنظیمات مشخص شده را نمایش می‌دهیم.

Array.from({ length: 5 }, (_, index) => (
یک آرایه از کارت‌ها ایجاد می‌کنیم که تعداد آن‌ها ۵ تا است.

<div key={index} className={`card ${index === 0 ? 'tilt-left' : index === 2 ? 'tilt-right' : ''}`}>
این خط مشخص می‌کند که کدام کارت‌ها باید کج شوند و برای هر کارت یک div ایجاد می‌کند.

</Slider>
در اینجا پایان تگ Slider است.

export default CardSlider;
ما کامپوننت خود را برای استفاده در بخش‌های دیگر صادر می‌کنیم.