Who can help with that? I need to write everything in a normal algorithm, not as it is now. I have three elements. I wanted to make it so that when I'm on the last one, the next button takes me back to the first element. To make a infinity loop carrousel. project at the react

import React, { useEffect, useState } from "react";
import { factory_img, factory_bg_svg } from "@/img_video";

export default function Factory_Video() {

    const arr_items = []

    useEffect(() => {
        const items = document.querySelectorAll('.item')

        for (let item of items) {
            arr_items.push(item)
        }
    })


    function next_slide() {


        const el_1 = arr_items[0].classList.contains("active")
        const el_2 = arr_items[1].classList.contains("active")


        if (el_1) {
            arr_items[0].classList.remove('active')
            arr_items[0].classList.add("transform")

            arr_items[1].classList.add("active")
            arr_items[1].classList.remove('transform')

        } else if (el_2) {
            arr_items[1].classList.remove('active')
            arr_items[1].classList.add("transform")

            arr_items[2].classList.add("active")
            arr_items[2].classList.remove('transform')
        }


    }



    }

    return (
        <section className="section_factory" >
            <img id="bg_section_factory" src={factory_bg_svg} alt="" />


            <div className="container_factory">
                <h1 className="h1_section_title" >О производстве <br /> Венарус</h1>

                <div className="wrapper">
                    <div className="window">


                        <div className="item  active" >
                            <img src={factory_img} />
                        </div>
                        <div className="item  transform" >
                            <img src={factory_img} />
                        </div>
                        <div className="item  transform" >
                            <img src={factory_img} />
                        </div>


                    </div>
                    <div className="navigation" >
                        <div className="btn_prev" ></div>
                        <div onClick={next_slide} className="btn_next" ></div>
                    </div>
                </div>

            </div>
        </section>
    );
}

I tried using array methods, but it didn't work.

CodePudding user response：

The code is not complete so I can't tell the exact changes you need to do, however here are a list of recommendations I can see your code lacks or are wrong.

• Never manipulate the dom directly with React.

  • Modifying the classlist in a function is not the React way and is prone to errors as it will be cleared if a re-render is triggered. Instead change the classes directly in the html.
  • It would be something like <div className={"item " active===0?'active':''} >

• You're declaring const arr_items = [] directly above useEffect. This varible will be cleared on every render. There are other ways to keep the info around in React, however in this case there is no point to keep the array of dom elements.

• Your useEffect has no dependencies (the array sent as second parameter). This makes it execute every time the component runs so there's no point in using a useEffect here. (btw you don't need it at all for this to work)

• Finally the "React" way (at least one approach) would be to have a state with the index of the active element. You just have to change this index with its corresponding setter and render the classes of each element conditionally.