请帮我在 react.js 中创建一个图像滑块？答案

【问题标题】：Please help me create an image slider in react.js?请帮我在 react.js 中创建一个图像滑块？
【发布时间】：2021-04-10 16:43:45
【问题描述】：

var workArrays = [{id: 1, img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&oh=d44bd3d97c906f56746b360fc7514c64&oe=5FF77A89"}, 
    {id: 2, img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&oh=d44bd3d97c906f56746b360fc7514c64&oe=5FF77A89"},
    {id: 3, img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&oh=d44bd3d97c906f56746b360fc7514c64&oe=5FF77A89"}, 
    {id: 4, img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&oh=d44bd3d97c906f56746b360fc7514c64&oe=5FF77A89"},
    {id: 5, img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&oh=d44bd3d97c906f56746b360fc7514c64&oe=5FF77A89"}]

     var slides = workArrays.length;
    class Page1 extends React.Component{
        constructor(props){
            super(props);
            this.state = {
             // SOS: this is the initial state that I have set up.
               slides : (0) 
            };
            this.leftArrow = this.leftArrow.bind(this);
            this.rightArrow = this.rightArrow.bind(this);
        }
            leftArrow(){
                this.setState({
                    // SOS: they are not doing anything when clicked
                    slides: this.state.slides - 1 
                })
            }
            rightArrow(){
                this.setState({
                    // SOS: this want also not doing anything
                    slides: this.state.slides + 1 T
               })

            }
        render(){
        return(
                <div>
                    <Header/>
                    <Hero/>
                    <div>
                        // SOS: Also my left arrown and right arrow are not showing up
                        <button onClick={this.leftArrow}><i className="far fa-arrow-circle-left"></i></button>
                        <button onClick={this.rightArrow}><i className="far fa-arrow-circle-right"></i></button>
                        {this.props.workArrays.map(function(work){
                            return <div key={work.id}>
                                <Services img={work.img}/>
                    </div>
            })}</div>
               </div>
        );
        }
    }

【问题讨论】：

控制台是否出现任何错误？
不，当我点击按钮时它不会转到下一张照片。
我在底部标签中输入 HTML 链接的方式也需要改进，因为它们不会显示为箭头，所以我也需要帮助。
rightArrow 函数中的 T 似乎是错字？
将className改为fas fa-arrow-circle-left而不是far fa-arrow-circle-left，右箭头也一样。

标签： javascript reactjs image slider setstate

【解决方案1】：

您没有正确的变量绑定：在类构造函数之前定义变量

 var slides = workArrays.length;

leftSlide 和 rightSlide 函数中有一个错误（你使用状态，你有一个零）

this.setState({
 slides: this.state.slides - 1 
});

这就是为什么在 this.state.slides 中单击左键有 -1 的原因。

尝试左键使用：

// calculate previous slide
var newCurrentSlide = this.state.slides - 1;
// if slide number < 0, then get last slide from array
if (newCurrentSlide < 0){
  newCurrentSlide = slides.length - 1;
}

this.setState({
 slides: newCurrentSlide
});

右键：

// calculate next slide
var newCurrentSlide = this.state.slides + 1;
// if slide number >= count slides, then get first slide from array
if (newCurrentSlide >= slides){
  newCurrentSlide = 0;
}

this.setState({
 slides: newCurrentSlide
});

我建议您将变量 slides 重命名为 slidesCount - 这是一个更好的命名约定。

如果您想要左右点击的动态滑块，那么您可以像这样显示单个活动图像：

render(){
  return(
    <div>
      <Header/>
      <Hero/>
      <div>
        <button onClick={this.leftArrow}><i className="far fa-arrow-circle-left"></i></button>
        <button onClick={this.rightArrow}><i className="far fa-arrow-circle-right"></i></button>
        <div key={this.props.workArrays[this.state.slides].id}>
          <Services img={this.props.workArrays[this.state.slides].img}/>
        </div>
      </div>
    </div>
  );
}

【讨论】：