React swipe carousel

import React from 'react'
import ReactSwipe from 'react-swipe'
import "./scss/css.css"
import shop1 from "./images/shop1.png"
import shop2 from "./images/shop2.png"
import shop3 from "./images/shop3.png"
class ShopDetilCom extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state={
           index:0
        }
    }
    render() {
        const opt1 = {
            auto: 2500,
            callback: function (index) {
                // Update the index of the current carousel
                this.setState({index: index});
            }.bind(this)
        }
        return (
            <div>
                    <ReactSwipe swipeOptions={opt1}>
                        <div className="carousel-item1">
                            <img src={shop1} className="shop" />
                        </div>
                        <div className="carousel-item1">
                            <img src={shop2} className="shop" />
                        </div>
                        <div className="carousel-item1">
                              <img src={shop3} className="shop" />
                        </div>
                    </ReactSwipe>
                    <div className="index-container">
                        <ul>
                            <li className={this.state.index1 === 0 ? "selected" : ''}></li>
                            <li className={this.state.index1 === 1 ? "selected" : ''}></li>
                            <li className={this.state.index1 === 2 ? "selected" : ''}></li>
                        </ul>
                    </div>
            </div>
        )
    }
}

export default ShopDetilCom

Install react-swipe before: npm install react-swipe