add swipe capability to carousels

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": {

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 <div>EMPTY</div>;
     }
     return (
-        <div className="mb-3">
+        <div className="mb-3" {...swipeHandlers}>
             <div className="d-flex flex-row justify-content-between align-items-center">
                 <img 
                     src={leftChevron}

yarn.lock

@@ -9776,6 +9776,11 @@ react-smooth-collapse@^2.1.0:
     "@babel/runtime" "^7.0.0"
     prop-types "^15.6.0"
 
+react-swipeable@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.1.0.tgz#558b08a797a749a33e98492af84f2ca84a23d146"
+  integrity sha512-vB6+bv1I5L9nfuM7quu41o/kK1f3a7cTQ3NHNWkOltg5uhBpnH6xvkQJeoPfKQ6K4pnifELXY65wzWwWBa+zGg==
+
 react-transition-group@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"