Fixed the carousel

components/blocks/carousel.tsx

@@ -4,6 +4,8 @@ import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/_
 import { Anchoring, anchoringSchema } from "../util/anchoring";
 import { Template } from "tinacms";
 import { PageBlockFunction } from "../blocks-renderer";
+import { Carousel as ReactCarousel } from "react-responsive-carousel";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
 
 /**
  * Section carousel used for the main page but can be used everywhere
@@ -13,7 +15,24 @@ import { PageBlockFunction } from "../blocks-renderer";
 export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({ data }) => {
     return (
         <Section>
-            <div className="carousel flex w-[100%] items-end justify-center" style={ { backgroundImage: `url(${ data?.images?.[0] })` } }>
+            <div className="w-[100%]">
+                <ReactCarousel
+                    showArrows={ false }
+                    showStatus={ false }
+                    showThumbs={ false }
+                    showIndicators={ false }
+                    stopOnHover={ false }
+                    swipeable={ false }
+                    useKeyboardArrows={ false }
+                    autoPlay={ true }
+                    infiniteLoop={ true }
+                    dynamicHeight={ false }
+                    interval={ data.speed || 3000 }>
+                    { data?.images?.map(imageUrl => (
+                        <div className="carousel-image" style={ { backgroundImage: `url(${ imageUrl })` } }/>
+                    )) }
+                </ReactCarousel>
+
                 { data?.link?.enabled && <Anchoring { ...data.link }/> }
             </div>
         </Section>);
@@ -29,6 +48,11 @@ export const carouselBlockSchema: Template = {
         defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel]
     },
     fields: [
+        {
+            type: "number",
+            label: "Vitesse de défilement en millisecondes",
+            name: "speed"
+        },
         {
             type: "image",
             label: "Images du carousel",