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;