diff --git a/package.json b/package.json index f6e36c3..98835fb 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-scripts": "3.4.3", "react-scrollspy": "^3.4.3", "react-smooth-collapse": "^2.1.0", + "react-swipeable": "^6.1.0", "typescript": "^4.2.3" }, "scripts": { diff --git a/src/components/Carousel.js b/src/components/Carousel.js index 6f36d51..e9442bc 100644 --- a/src/components/Carousel.js +++ b/src/components/Carousel.js @@ -7,6 +7,7 @@ */ import React, { useState } from "react"; +import { useSwipeable } from "react-swipeable"; import leftChevron from "./chevron_left-24px.svg"; import rightChevron from "./chevron_right-24px.svg"; @@ -19,6 +20,10 @@ export default function(props) { // console.log("pppp"); // console.log(props.items); const [current, setCurrent] = useState(0); + const swipeHandlers = useSwipeable({ + onSwipedLeft: () => forward(), + onSwipedRight: () => back(), + }); function forward() { setCurrent( (current + 1) % props.items.length @@ -35,7 +40,7 @@ export default function(props) { return
EMPTY
; } return ( -
+