Carousel Component

Instruction d'installation :

npm i npmcarousel110

exemple de code pour le carousel.

Les classes présentent dans l'exemple sont celles par défauts. Lorsque de l'appel d'une de ces classes votre code prendra le dessus

        const [pictures, setPictures] = useState([]);

        useEffect(() => {
          fetch('/pictures.json')
          .then((response) => response.json())
          .then((data) => setPictures(data))
          .catch((error) => console.error('Error fetching pictures:', error));
        }, []);

        <Carousel
          pictures={pictures.map(pic => pic.url)}
          titles={pictures.map(pic => pic.title)}
          alt="Carousel Image"
          arrowLeft= "/arrowLeft.png"
          arrowRight= "/arrowRight.png"
          classes={{
            singlePictureSection: "relative flex justify-center items-center w-full h-64 md:h-96",
            singlePictureImage: "w-4/5 h-full object-fill rounded-lg",
            carouselSection: "relative flex flex-col justify-center items-center w-[90%] mx-auto h-64 pt-5 mb-10 md:h-96",
            carouselImage: "w-full h-full object-cover rounded-xl ",
            counter: "mt-2 text-black font-medium px-3 py-1 bg-transparent rounded-md text-sm md:text-base",
            navigation: "absolute top-0 left-3 right-3 bottom-0 flex justify-between items-center",
          navButton: "dp-2 bg-white bg-opacity-50 rounded-full shadow-md ",
          navIcon: "w-6 h-6 md:w-8 md:h-8",
          title: "text-center font-bold text-2xl",
          }}
        />

fichier json de l'exemple

        [
            {
	            "url": "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-1.jpg",
	            "title": "titre1"
            },
            {
	            "url": "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-2.jpg",
	            "title": "titre2"
            },
            {
	            "url": "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-3.jpg",
	            "title": "titre3"
            },
            {
	            "url": "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-4.jpg",
	            "title": "titre4"
            },
            {
	            "url": "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-5.jpg",
	            "title": "titre5"
            }
          ]