如何在圖像滑塊中反應顯示先前的圖像？

Question

我正在嘗試使圖像滑塊反應。我能夠使滑塊。如果您單擊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圖像left移至0px ，將下一個圖像移至100 。 任何更新

Answer 1

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

您還需要向左滑動動畫：)

HTH。