Блог

Я только начал изучать использование модуля CSS.

Что я пытаюсь сделать, так это создать слайдер, и для достижения его функциональных возможностей я динамически изменяю имя класса с помощью «activeSlide», «nextSlide» и «lastSlide». Однако у меня есть проблема с модулем CSS, в котором я не знаю, что добавить в имя класса для динамического позиционирования и применения свойства CSS, соответствующего каждой позиции одновременно. Как я мог бы достичь обеих функций в одном имени класса, используя модуль CSS.

Вот мой файл index.jsx,

 import React, { useState, useEffect } from 'react';
import {FiChevronRight, FiChevronLeft} from 'react-icons/fi';
import reviewdata from './reviewdata';
import styles from './index.module.css';


export default function Review(){

    const randomizer =()=>{
        let number = Math.floor(Math.random()* (people.length))
        return number;
    }

    const [people, setPeople]= useState(reviewdata);
    const [index, setIndex] = useState(randomizer());

    useEffect(()=>{
        const lastIndex = people.length - 1;
        if (index < 0){
            setIndex(lastIndex);
        } 
        if (index > lastIndex){
            setIndex(0);
        }
    },[index,people]);

    useEffect(()=> {
        let slider = setInterval(()=>{
            setIndex(index   1);
        },4000)
        return ()=> clearInterval(slider)
    },[index])

    return (
        <section className={styles.main}>
            <div className={styles.title}>
                <h2>Reviews</h2>
            </div>
            <div className={styles.review_main}>
                {people.map((person, personIndex)=>{
                    const {id, username, userphoto, description, reviewphoto, star} = person;
                    
                    let position = 'nextSlide';

                    if(personIndex === index){
                        position = 'activeSlide';
                    }
                    
                
                    if(personIndex === index - 1 || (index === 0 amp;amp; personIndex === people.length - 1)){
                        position = 'lastSlide';
                    }

                    return (
                        // still need to fix styles with dynamic position
                        <article className={`${styles.article} ${styles.position}`} key={id}> 
                            <img src={userphoto} alt={username} className={styles.person_img}/>
                            <h4>{username}</h4>
                            <p className={styles.title}>{star}</p>
                            <p className={styles.text_review}>{`"${description}"`}</p>
                            <img className={styles.review_img} src={reviewphoto} alt={username} />
                        </article>

                    )
                })}
                <button className={styles.prev} onClick={()=> setIndex(index - 1)}>
                    <FiChevronLeft/>
                </button>
                <button className={styles.next} onClick={()=> setIndex(index   1)}>
                    <FiChevronRight/>
                </button>
            </div>
        </section>
    )
}
 

Вот мой index.module.css, где я показываю только часть тега статьи.

 article {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: var(--transition);
}
article.activeSlide {
  opacity: 1;
  transform: translateX(0);
}
article.lastSlide {
  transform: translateX(-100%);
}
article.nextSlide {
  transform: translateX(100%);
}
 

Если вы используете модуль css в react, вам не нужно его использовать article.activeSlide . Так как это всего лишь один модуль, связанный с css. Используйте activeSlide в файле css и style[position] там, где вы хотите его использовать