どのようにイメージのスライダーに

Question

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つの画像を必要とし、誰もがCSSと反応またはHTML

Answer 1

使用既製のライブラリを使用して私のコードを与えることができ、ここでは一例

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

Answer 2

まず、質問をする方法ではありません。あなたはすべて作られたのいくつかを使用することができますCheck here how to ask good question.

は、Sliderコンポーネントを反応するが、あなたが自分でそれをしたい場合は、このような何かを行うことができます。

これは、アイデアを得るためだけである：

class Test extends React.Component { 
 
\t \t constructor(){ 
 
    \t super(); 
 
     
 
     this.state = { 
 
     \t marginLeft: 0 
 
     } 
 
    } 
 
    
 
    componentDidMount(){ 
 
     this.interval = setInterval(this.changeSlide.bind(this), 2000); 
 
    } 
 
    
 
    changeSlide(){ 
 
    \t let totalSlides = document.getElementById("inner").children.length - 1; 
 
     
 
    \t let getWidth = document.getElementById("slide1").offsetWidth; 
 
     
 
     let marginLeft = this.state.marginLeft; 
 
     
 
     if((totalSlides * -getWidth) >= this.state.marginLeft){ 
 
     \t \t marginLeft = 0 
 
     }else{ 
 
     \t \t marginLeft = this.state.marginLeft - getWidth 
 
     \t \t 
 
     } 
 
     
 
    \t this.setState({marginLeft}) 
 
    } 
 
    
 
\t \t render(){ 
 
    \t return (
 
     \t <div className="outter"> 
 
      <div id="inner" className="inner" style={{marginLeft: this.state.marginLeft}}> 
 
      \t \t <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設定された間隔で

スライド（この場合）2秒ごとに変更する関数を呼び出します。

関数changeSlideでは、最初にスライドの総数と最初の幅を取得する必要があります（すべて同じ幅を持つため）。

最後のスライドがmargin-leftに設定されていない場合は、その状態の現在のmargin-leftの写真widthを差し引きます。最後に状態を更新します。

これでどのようにできるか考えていただきたいと思います。

Here is the fiddle.