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",

content/pages/home.mdx

@@ -1,9 +1,11 @@
 ---
 title: Accueil
 blocks:
-  - images:
-      - /uploads/unsplash-75EFpyXu3Wg.jpg
-      - /uploads/tina-cloud-starter-preview.png
+  - speed: 8000
+    images:
+      - /uploads/painting2.jpg
+      - /uploads/painting1.jpg
+      - /uploads/painting10.jpg
     link:
       enabled: true
       text: Découvrez-en plus !
@@ -178,6 +180,9 @@ url: home
 
 
 
+
+
+
 
 
 

package.json

@@ -16,6 +16,7 @@
     "@types/js-cookie": "^3.0.0",
     "@types/node": "^16.11.7",
     "@types/react": "^17.0.35",
+    "@types/react-gtm-module": "^2.0.1",
     "@types/sanitize-html": "^2.9.0",
     "@types/styled-components": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
@@ -35,7 +36,9 @@
     "next": "^13.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-gtm-module": "^2.0.11",
     "react-icons": "^4.2.0",
+    "react-responsive-carousel": "^3.2.23",
     "sanitize-html": "^2.11.0",
     "sass": "^1.66.1",
     "styled-jsx": "^3.2.5",

styles/anchoring.scss

@@ -1,5 +1,9 @@
 .anchoring {
     font-family: 'Questrial', sans-serif;
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
 
     h1 {
         margin-bottom: -35px;

styles/carousel.scss

@@ -1,7 +1,7 @@
-.carousel {
+.carousel-image {
     height: calc(100vh - var(--header-Height));
     background-position-x: center;
-    background-position-y: bottom;
+    background-position-y: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

yarn.lock

@@ -3258,6 +3258,11 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/react-gtm-module@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-gtm-module/-/react-gtm-module-2.0.1.tgz#b2c6cd14ec251d6ae7fa576edf1d43825908a378"
+  integrity sha512-T/DN9gAbCYk5wJ1nxf4pSwmXz4d1iVjM++OoG+mwMfz9STMAotGjSb65gJHOS5bPvl6vLSsJnuC+y/43OQrltg==
+
 "@types/react-redux@^7.1.20":
   version "7.1.25"
   resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz"
@@ -4628,6 +4633,11 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
+classnames@^2.2.5:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-git-ref@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/clean-git-ref/-/clean-git-ref-2.0.1.tgz"
@@ -8273,7 +8283,7 @@ prop-types@15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8436,6 +8446,13 @@ react-dropzone@14.2.3:
     file-selector "^0.6.0"
     prop-types "^15.8.1"
 
+react-easy-swipe@^0.0.21:
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
+  integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-final-form@^6.3.0:
   version "6.5.9"
   resolved "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz"
@@ -8443,6 +8460,11 @@ react-final-form@^6.3.0:
   dependencies:
     "@babel/runtime" "^7.15.4"
 
+react-gtm-module@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206"
+  integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==
+
 react-hotkeys-hook@^4.3.7:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz#1f7a7a1c9c21d4fa3280bf340fcca8fd77d81994"
@@ -8504,6 +8526,15 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-responsive-carousel@^3.2.23:
+  version "3.2.23"
+  resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz#4c0016ff54603e604bb5c1f9e7ef2d1eda133f1d"
+  integrity sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.8"
+    react-easy-swipe "^0.0.21"
+
 react-router-dom@6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz"