I have tried implementing alice-carousel. The buttons hide and show when it's the start or end of the item list but the items are not moving. On clicking the default button controls, they move but my custom button does not. I would like to get some feedback on this and my code if I have missed something.
`import React, {useState} from "react";
import AliceCarousel from "react-alice-carousel";
import HomeSectionCard from "../HomeSectionCard/HomeSectionCard";
import { Button } from "@mui/material";
import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
I have tried implementing alice-carousel. The buttons hide and show when it's the start or end of the item list but the items are not moving. On clicking the default button controls, they move but my custom button does not. I would like to get some feedback on this and my code if I have missed something.
`import React, {useState} from "react"; import AliceCarousel from "react-alice-carousel"; import HomeSectionCard from "../HomeSectionCard/HomeSectionCard"; import { Button } from "@mui/material"; import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
const HomeSectionCarousel = ({data}) => { const[activeIndex, setActiveIndex] = useState(0); const responsive = { 0: { items: 1 }, 720: { items: 3 }, 1024: { items: 5 }, };
const slidePrev = () => setActiveIndex(activeIndex-1); const slideNext = () => setActiveIndex(activeIndex+1);
// this will tell which index is active currently. const syncActiveIndex = ({item}) => setActiveIndex(item)
const items = data.slice(0,10).map((item) => );
return (
); };
export default HomeSectionCarousel; `