如何在圖像滑塊中顯示以前的圖像？

我正在努力使圖像滑塊在作出反應。我能夠使滑塊。如果你點擊next按鈕它顯示下一個圖像。但我有一個問題在previous按鈕點擊，當我點擊上一個按鈕它是沒有顯示以前的圖像。這裏是我的代碼 https://codesandbox.io/s/PNzqkxgPl 如何在圖像滑塊中顯示以前的圖像？

import React, { Component } from "react"; 
import "./listing.css"; 
const pics = [ 
    "http://mumbaimirror.indiatimes.com/thumb/msid-59722654,width-320,height-385,resizemode-4.cms", 
    "http://mumbaimirror.indiatimes.com/thumb/msid-59719574,width-320,height-385,resizemode-4.cms", 
    "https://cdn.pixabay.com/photo/2017/07/14/17/44/frog-2504507__480.jpg", 
    "https://cdn.pixabay.com/photo/2016/09/04/13/08/bread-1643951__480.jpg" 
]; 
class Hello extends Component { 
    constructor(props) { 
    super(props); 

    const idxStart = 0; 
    this.state = { 
     index: idxStart, 
     next: this.getNextIndex(idxStart), 
     move: false 
    }; 
    this.next = this.next.bind(this); 
    this.pre = this.pre.bind(this); 
    } 

    getNextIndex(idx) { 
    if (idx >= pics.length - 1) { 
     return 0; 
    } 
    return idx + 1; 
    } 

    getPreviousIndex(idx) { 
    if (idx >= 0) { 
     return pics.length - 1; 
    } 
    return idx - 1; 
    } 
    next() { 
    this.setState({ 
     move: true 
    }); 
    setTimeout(() => { 
     this.setState({ 
     move: false 
     }); 
     this.setIndexes(this.getNextIndex(this.state.index)); 
    }, 500); 
    } 
    pre() { 
    this.setState({ 
     move: true 
    }); 
    setTimeout(() => { 
     this.setState({ 
     move: false 
     }); 
     this.setIndexes(this.getPreviousIndex(this.state.index)); 
    }, 500); 
    } 
    setIndexes(idx) { 
    this.setState({ 
     index: idx, 
     next: this.getNextIndex(idx) 
    }); 
    } 

    render() { 
    const move = this.state.move ? "move" : ""; 

    return (
     <div> 
     <div className="mask"> 
      <div className="pic-wrapper"> 
      <div className={`current pic ${move}`}> 
       {this.state.index} 
       <img src={pics[this.state.index]} alt="" /> 
      </div> 
      <div className={`next pic ${move}`}> 
       {this.state.next} 
       <img src={pics[this.state.next]} alt="" /> 
      </div> 
      </div> 
     </div> 
     <button onClick={this.next}>Next</button> 
     <button onClick={this.pre}>pre</button> 
     </div> 
    ); 
    } 
} 

export default Hello;

我用下面的概念。

我需要兩個圖像始終。一是current和第二是next。如果我點擊next按鈕，我的current圖像0移動到0px 和下一個圖像左100。任何更新

來源

2017-07-24 naveen

getPreviousIndex(idx) { 
    if (idx >= 0) { // this should be if (idx === 0) 
     return pics.length - 1; 
    } 
    return idx - 1; 
    }

您還需要一個向左滑動動畫:)

HTH。

來源

2017-07-24 07:58:08 sirrocco

如何在圖像滑塊中顯示以前的圖像？

回答

相關問題