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">
+              <Image src={image} alt="" />
-
-              <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>
           ))
         }
@@ -42,24 +36,23 @@ const { images } = Astro.props;
 
 <script>
   import Swiper from "swiper";
-  const swiper = new Swiper(".swiper", {
+  import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
-    // Optional parameters
+  
-    loop: true,
+const swiper = new Swiper('.swiper', {
+  modules: [Navigation, Pagination, Scrollbar],
+  loop: true,
 
-    // If we need pagination
+  navigation: {
-    pagination: {
+    nextEl: '.swiper-button-next',
-      el: ".swiper-pagination",
+    prevEl: '.swiper-button-prev',
-    },
+  },
 
-    // Navigation arrows
+  pagination: {
-    navigation: {
+    el: '.swiper-pagination',
-      nextEl: ".swiper-button-next",
+  },
-      prevEl: ".swiper-button-prev",
-    },
 
-    // And if we need scrollbar
+  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 = [
-  {
+  "https://picsum.photos/1920/800?random=1&grayscale",
-    image: "https://picsum.photos/1920/800?random=1&grayscale",
+  "https://picsum.photos/1920/800?random=2&grayscale",
-    text: "Justicia",
+  "https://picsum.photos/1920/800?random=3&grayscale",
-  },
-  {
-    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",
-    image: "https://picsum.photos/1920/800?random=1&grayscale",
+  "https://picsum.photos/1920/800?random=2&grayscale",
-    text: "Justicia",
+  "https://picsum.photos/1920/800?random=3&grayscale",
-  },
-  {
-    image: "https://picsum.photos/1920/800?random=2&grayscale",
-    text: "Paz",
-  },
-  {
-    image: "https://picsum.photos/1920/800?random=3&grayscale",
-    text: "",
-  }
 ];
 ---