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