Question

sqlite3 "$DB" "PRAGMA busy_timeout=20000; ALTER TABLE '$TABLE' RENAME TO '$TABLE"_backup"'"

我需要这4个图像作为滑块，任何人都可以使用react或html与CSS

给我代码

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.

你可以使用一些所有制造的React Slider Components，但是如果你想自己做，你可以这样做：

这只是为了得到这个想法：

＆＃13;

require_relative *Dir['relative path']

＆＃13;

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'));

＆＃13;

.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;
}

＆＃13;

在<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">  </div>设置间隔中调用函数每2秒更改一次幻灯片（在这种情况下）。

在函数componentDidMount中，首先需要获得总幻灯片和第一个幻灯片的宽度（因为所有宽度都相同）。

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

希望这会让你了解如何做到这一点。

Here is the fiddle.

如何设置图像滑块

2 个答案: