src/components/section/CarouselSection.astro

@@ -14,13 +14,7 @@ const { images } = Astro.props;
         {
           images.map((image) => (
             <div class="swiper-slide">
-              <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>
+              <Image src={image} alt="" />
             </div>
           ))
         }
@@ -42,24 +36,23 @@ const { images } = Astro.props;
 
 <script>
   import Swiper from "swiper";
-  const swiper = new Swiper(".swiper", {
-    // Optional parameters
+  import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
+  
+const swiper = new Swiper('.swiper', {
+  modules: [Navigation, Pagination, Scrollbar],
   loop: true,
 
-    // If we need pagination
-    pagination: {
-      el: ".swiper-pagination",
-    },
-
-    // Navigation arrows
   navigation: {
-      nextEl: ".swiper-button-next",
-      prevEl: ".swiper-button-prev",
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+
+  pagination: {
+    el: '.swiper-pagination',
   },
 
-    // And if we need scrollbar
   scrollbar: {
-      el: ".swiper-scrollbar",
+    el: '.swiper-scrollbar',
   },
 });
 </script>

src/pages/index.astro

@@ -20,33 +20,15 @@ import FormationSection from "../components/section/FormationSection.astro";
 import FooterSection from "../components/section/FooterSection.astro";
 
 const carouselImages2 = [
-  {
-    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: "",
-  }
+  "https://picsum.photos/1920/800?random=1&grayscale",
+  "https://picsum.photos/1920/800?random=2&grayscale",
+  "https://picsum.photos/1920/800?random=3&grayscale",
 ];
 
 const carouselImages3 = [
-  {
-    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: "",
-  }
+  "https://picsum.photos/1920/800?random=1&grayscale",
+  "https://picsum.photos/1920/800?random=2&grayscale",
+  "https://picsum.photos/1920/800?random=3&grayscale",
 ];
 ---