src/components/section/CarouselSection.astro

@@ -14,7 +14,13 @@ const { images } = Astro.props;
         {
           images.map((image) => (
             <div class="swiper-slide">
-              <Image src={image} alt="" />
+              <div class="flex! flex-col items-center justify-center relative">
+
+              <div class="uppercase text-2xl lg:text-9xl text-white shadow-2xl absolute font-secondary">
+                {image.text}
+              </div>
+              <Image src={image.image} alt="" />
+              </div>
             </div>
           ))
         }
@@ -36,23 +42,24 @@ const { images } = Astro.props;
 
 <script>
   import Swiper from "swiper";
-  import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
+  const swiper = new Swiper(".swiper", {
+    // Optional parameters
+    loop: true,
 
-const swiper = new Swiper('.swiper', {
-  modules: [Navigation, Pagination, Scrollbar],
-  loop: true,
+    // If we need pagination
+    pagination: {
+      el: ".swiper-pagination",
+    },
 
-  navigation: {
-    nextEl: '.swiper-button-next',
-    prevEl: '.swiper-button-prev',
-  },
+    // Navigation arrows
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
 
-  pagination: {
-    el: '.swiper-pagination',
-  },
-
-  scrollbar: {
-    el: '.swiper-scrollbar',
-  },
-});
+    // And if we need scrollbar
+    scrollbar: {
+      el: ".swiper-scrollbar",
+    },
+  });
 </script>

src/pages/index.astro

@@ -20,15 +20,33 @@ import FormationSection from "../components/section/FormationSection.astro";
 import FooterSection from "../components/section/FooterSection.astro";
 
 const carouselImages2 = [
-  "https://picsum.photos/1920/800?random=1&grayscale",
-  "https://picsum.photos/1920/800?random=2&grayscale",
-  "https://picsum.photos/1920/800?random=3&grayscale",
+  {
+    image: "https://picsum.photos/1920/800?random=1&grayscale",
+    text: "Justicia",
+  },
+  {
+    image: "https://picsum.photos/1920/800?random=2&grayscale",
+    text: "Paz",
+  },
+  {
+    image: "https://picsum.photos/1920/800?random=3&grayscale",
+    text: "",
+  }
 ];
 
 const carouselImages3 = [
-  "https://picsum.photos/1920/800?random=1&grayscale",
-  "https://picsum.photos/1920/800?random=2&grayscale",
-  "https://picsum.photos/1920/800?random=3&grayscale",
+  {
+    image: "https://picsum.photos/1920/800?random=1&grayscale",
+    text: "Justicia",
+  },
+  {
+    image: "https://picsum.photos/1920/800?random=2&grayscale",
+    text: "Paz",
+  },
+  {
+    image: "https://picsum.photos/1920/800?random=3&grayscale",
+    text: "",
+  }
 ];
 ---