维护多个反应光滑的索引

Question

I am making a react project. I have a page where have to use multiple react-slick elements. I want to maintain index of each slick element. Currently I am doing this

render() {
            var settings = {
            arrows: true,
            infinite: false,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            afterChange: function(currentSlide){
            this.setState({
            currentSlide: currentSlide
        })
            console.log(currentSlide);
        }.bind(this)
        };
            return (

            <div className="main-wrapper">

            {/*carousel responsive1*/}

            {this.state.users.map((item,i)=>{
                return  <div className="main-wrapper-mobile">
                    <div className="carousel responsive1">
                        <div className="mask">
                            {/*slideset */}
                            <div className="slideset">
                                {/*slide*/}

                                <Slider {...settings}>
                                    {item.activities.map((item1,i)=>{
                                        return <div className="slide">
                                            <div className="content__item d-flex">

                                                <div className="content__photo">
                                                    <img className="content__img" src={item.image_url}/>
                                                </div>
                                                <div className="article">
                                                    <p className="article__text">{item.comment_text}</p>
                                                    <ul className="article__controls">
                                                        <li className="article__control-item"><a href="#">visual <i
                                                            className="fa fa-eye" aria-hidden="true"></i></a></li>
                                                        <li className="article__control-item"><a href="#">text <i
                                                            className="fas fa-comment-dots"></i></a></li>
                                                        <li className="article__control-item"><a href="#">edited <i
                                                            className="fas fa-edit"></i></a></li>
                                                    </ul>
                                                    <div className="article__icon">
                                                        <a href="#" className="article__icon--blue"> <i
                                                            className="fa fa-check-circle" aria-hidden="true"></i></a>
                                                        <a href="#" className="article__icon--gray"><i
                                                            className="fa fa-minus-circle" aria-hidden="true"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    })}

                                </Slider>
                            </div>
                        </div>

Brief explaination of above code:

I have an array of users. Each user is assigned a slider. That is why I am mapping the users array and rendering in each mapping.

Currently the "currentSlide" parameter in "settings" sets the state "currentSlide" to whatever currentSlide is. The problem is the same state changes for all the sliders. There is no way to keep track of which slider is getting slide. I should be able to change or maintain slider and it's corresponding index. How should I do it?

Answer 1

You would have to dynamically create a new settings object per instance of react-slick, and attach an extra value (in this case I just added an extra string called "Slider1" or "Slider2", etc.) inside the callback function of afterChange. Basically whenever the user changes the slides of on a particular react slider, the state under currentSlide would have an object that looks like this {indexSlider: "Slider1", indexOfCurrentSlide: 2 } . Let me know if this clarifies what you are asking for. I figured this is one way of distinguishing which Slider has been changed.

const MultipleSliders = () => {
  const [ currentSlide, setCurrentSlide ] = useState({})
  const generateSettings = (indexSlider) => {
    return {
      arrows: true,
      infinite: false,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      afterChange: (indexOfCurrentSlide) => {
        setCurrentSlide({
          indexSlider,
          indexOfCurrentSlide
        })
      }
    }
  }
  const settings1 = generateSettings('Slider1');
  const settings2 = generateSettings('Slider2');
  const settings3 = generateSettings('Slider3');
  return (
    <React.Fragment>
      <Slider {...settings1}>
        {/* content goes here */}
      </Slider>
      <Slider {...settings2}>
        {/* content goes here */}
      </Slider>
      <Slider {...settings3}>
        {/* content goes here */}
      </Slider>
    </React.Fragment>
  )
}