My React web app features a carousel component that functions perfectly on Firefox. However, in Chrome on mobile devices, when I swipe down the page, it interprets it as a horizontal swipe and switches slides on the slideshow. The library I am using is called react-material-ui-carouse, which only offers props to enable or disable sliding functionality. I couldn't find any information in the documentation about adjusting slide sensitivity. Is there a feasible solution to resolve this issue, or would it be more advisable to avoid using this library? You can visit the website to experience the problem firsthand on a mobile device.
Slideshow.jsx
function Slideshow() {
const fadeImages = [
{
src: "/images/allie-pic.webp",
title: "First Slide",
caption:
"Slide1",
},
{
src: "/images/image-2.jpg",
title: "Second Slide",
caption:
"Slide2",
},
{
src: "/images/image-3.webp",
title: "Third Slide",
caption:
"Slide3",
},
];
return (
<Carousel
swipe={true}
autoPlay={false}
fullHeightHover={false}
>
{fadeImages.map((img, i) => (
<Item key={i} img={img} />
))}
</Carousel>
);
}
function Item({ img }) {
return (
<Stack alignItems="center">
<Typography variant="h1">
{img.title}
</Typography>
<Typography variant="body1">{img.caption}</Typography>
<img
src={img.src}
></img>
</Stack>
);
}
export default Slideshow;