Untitled
import React from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; function MatchScoreCardSlider({ children }) { const settings = { dots: false, infinite: false, loop: false, slidesToShow: 4, slidesToScroll: 3, arrows: true, autoplay: false, autoplaySpeed: 3000, responsive: [ { breakpoint: 1100, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, dots: false, arrows: true, }, }, { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 1, initialSlide: 1, dots: false, arrows: true, }, }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1, initialSlide: 1, dots: false, arrows: true, }, }, ], }; return ( <div className="scoreCardContainer"> <Slider {...settings}>{children}</Slider> </div> ); } export default MatchScoreCardSlider;
Leave a Comment