Untitled
// CarouselSlider.js import React from 'react'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import './CarouselSlider.css'; const CarouselSlider = ({ offers }) => { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, }; return ( <Slider {...settings} className="carousel-slider"> {offers.map((offer, index) => ( <div key={index} className="carousel-slide"> <img src={offer.image} alt={offer.title} className="carousel-slide-image" /> <div className="carousel-slide-content"> <h3 className="carousel-slide-title">{offer.title}</h3> <p className="carousel-slide-description">{offer.description}</p> </div> </div> ))} </Slider> ); }; export default CarouselSlider;
Leave a Comment