如何设置图像滑块答案

【问题标题】：How to set Image Slider如何设置图像滑块
【发布时间】：2017-01-11 04:43:45
【问题描述】：

var Home = React.createClass({
    render: function() {
      return (
          <div>
              <img src="images/12.jpg" />
              <img src="images/11.jpg" />
              <img src="images/13.jpg" />
              <img src="images/14.jpg" />
          </div>
       )
    }
})

我需要这 4 张图片作为滑块，谁能给我使用 react 或 html 和 CSS 的代码

【问题讨论】：

var Home = React.createClass({ render: function() { return (
您能解释一下“滑块”是什么意思吗？你能举个例子吗？

标签： html css reactjs

【解决方案1】：

使用现成的库，这里是例子

https://github.com/jossmac/react-images
https://github.com/xiaolin/react-image-gallery
http://kenwheeler.github.io/slick/

【讨论】：

【解决方案2】：

首先这不是提问的方式。 Check here how to ask good question.

你可以使用所有制作的 React Slider 组件，但如果你想自己做，你可以这样做：

这只是为了理解：

class Test extends React.Component {
		constructor(){
    	super();
      
      this.state = {
      	marginLeft: 0
      }
    }
    
    componentDidMount(){
        this.interval = setInterval(this.changeSlide.bind(this), 2000);
    }
    
    changeSlide(){
    	let totalSlides = document.getElementById("inner").children.length - 1;
      
    	let getWidth = document.getElementById("slide1").offsetWidth;   
      
      let marginLeft = this.state.marginLeft;
      
      if((totalSlides * -getWidth) >= this.state.marginLeft){
      		marginLeft = 0
      }else{
      		marginLeft = this.state.marginLeft - getWidth
      		
      }
      
    	this.setState({marginLeft})
    }
    
		render(){
    	return (
      	<div className="outter">
           <div id="inner" className="inner" style={{marginLeft: this.state.marginLeft}}>
           		<img src="https://cdn.pixabay.com/photo/2016/12/29/16/12/eiskristalle-1938842_960_720.jpg" style={{maxWidth: "100%"}} id="slide1"/>
              <img src="https://cdn.pixabay.com/photo/2014/10/16/09/15/frost-490807_960_720.jpg" style={{maxWidth: "100%"}} id="slide2"/>
              <img src="https://cdn.pixabay.com/photo/2015/03/01/07/24/winter-654442_960_720.jpg" id="slide3"/>
              
           </div>
        </div>
      )
    }
}

ReactDOM.render(<Test />, document.getElementById('container'));

.outter{
  width: 500px;
  overflow: hidden;
}

.inner{
  width: 1000%;
  float:left;
  margin-left: 0;
  transition: all 1s ease;
}

.inner img{
  max-width: 500px;
  width: 500px;
  float:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

在componentDidMount中设置interval调用函数每2秒换一次幻灯片（本例中）。

在函数changeSlide 中，首先您需要获取总幻灯片和第一张幻灯片的宽度（因为它们的宽度相同）。

如果是最后一张幻灯片，则将margin-left 设置为 0，如果不是，则减去当前状态下的margin-left 的照片width。最后更新状态。

希望这能让您了解如何做到这一点。

Here is the fiddle.

【讨论】：