added astro-swiper instead of js swiper

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
@@ -16,44 +16,44 @@
     "remove-darkmode": "node scripts/removeDarkmode.js && yarn format"
   },
   "dependencies": {
-    "@astrojs/check": "0.9.5",
+    "@astrojs/check": "0.9.6",
-    "@astrojs/mdx": "4.3.12",
+    "@astrojs/mdx": "4.3.13",
     "@astrojs/react": "4.4.2",
     "@astrojs/sitemap": "3.6.0",
     "@digi4care/astro-google-tagmanager": "^1.6.0",
     "@justinribeiro/lite-youtube": "^1.9.0",
-    "astro": "5.16.0",
+    "astro": "5.16.5",
     "astro-auto-import": "^0.4.5",
     "astro-font": "^1.1.0",
+    "astro-swiper": "^1.3.0",
     "date-fns": "^4.1.0",
     "disqus-react": "^1.1.7",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "marked": "^17.0.0",
+    "marked": "^17.0.1",
     "prop-types": "^15.8.1",
-    "react": "^19.2.0",
+    "react": "^19.2.3",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.3",
     "react-icons": "^5.5.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
-    "swiper": "^12.0.3",
+    "sharp": "^0.34.5",
-    "vite": "^7.2.2",
+    "vite": "^7.2.7"
-    "sharp": "^0.34.5"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "24.10.1",
+    "@types/node": "24.10.3",
-    "@types/react": "19.2.6",
+    "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "concurrently": "^9.2.1",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.7.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwind-bootstrap-grid": "^6.0.0",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3"
   }
 }

src/layouts/partials/Testimonial.astro

@@ -1,7 +1,38 @@
 ---
-import { markdownify } from "@/lib/utils/textConverter";
 import ImageMod from "@/components/ImageMod.astro";
+import { markdownify } from "@/lib/utils/textConverter";
+import {
+  Swiper,
+  SwiperPagination,
+  SwiperSlide,
+  SwiperWrapper,
+} from "astro-swiper";
+import type { SwiperOptions } from "swiper/types";
+
 const { testimonial } = Astro.props;
+
+const swiperOptions: SwiperOptions = {
+  spaceBetween: 24,
+  loop: true,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+  },
+  pagination: {
+    el: ".testimonial-slider-pagination",
+    type: "bullets",
+    clickable: true,
+    dynamicBullets: false,
+  },
+  breakpoints: {
+    768: {
+      slidesPerView: 2,
+    },
+    992: {
+      slidesPerView: 3,
+    },
+  },
+};
 ---
 
 {
@@ -14,8 +45,8 @@ const { testimonial } = Astro.props;
             <p set:html={markdownify(testimonial.data.description)} />
           </div>
           <div class="col-12">
-            <div class="swiper testimonial-slider">
+            <Swiper options={swiperOptions} class="testimonial-slider">
-              <div class="swiper-wrapper">
+              <SwiperWrapper class={"mb-12"}>
                 {testimonial.data.testimonials.map(
                   (item: {
                     avatar: string;
@@ -23,7 +54,7 @@ const { testimonial } = Astro.props;
                     name: string;
                     designation: string;
                   }) => (
-                    <div class="swiper-slide">
+                    <SwiperSlide>
                       <div class="rounded-lg bg-light px-7 py-10 dark:bg-darkmode-light">
                         <div class="text-text-dark dark:text-white">
                           <svg
@@ -66,48 +97,15 @@ const { testimonial } = Astro.props;
                           </div>
                         </div>
                       </div>
-                    </div>
+                    </SwiperSlide>
                   )
                 )}
-              </div>
+              </SwiperWrapper>
-              <div class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center" />
+              <SwiperPagination class="testimonial-slider-pagination flex items-center justify-center" />
-            </div>
+            </Swiper>
           </div>
         </div>
       </div>
     </section>
   )
 }
-
-<script>
-  import { Swiper } from "swiper";
-  import "swiper/css";
-  import "swiper/css/pagination";
-  import { Autoplay, Pagination } from "swiper/modules";
-
-  // astro:page-load event is fired when the page is loaded
-  document.addEventListener("astro:page-load", () => {
-    new Swiper(".testimonial-slider", {
-      modules: [Pagination, Autoplay],
-      spaceBetween: 24,
-      loop: true,
-      autoplay: {
-        delay: 2500,
-        disableOnInteraction: false,
-      },
-      pagination: {
-        el: ".testimonial-slider-pagination",
-        type: "bullets",
-        clickable: true,
-      },
-      breakpoints: {
-        768: {
-          slidesPerView: 2,
-        },
-        992: {
-          slidesPerView: 3,
-        },
-      },
-    });
-  });
-</script>

src/styles/safe.css

@@ -13,9 +13,9 @@ input#nav-toggle:checked ~ #nav-menu {
 
 /* swiper pagination */
 .swiper-pagination-bullet {
-  @apply !h-2.5 !w-2.5 !bg-light !opacity-100 dark:!bg-darkmode-light;
+  @apply size-2.5! bg-light! opacity-100! dark:bg-darkmode-light!;
 }
 
 .swiper-pagination-bullet-active {
-  @apply !h-4 !w-4 !bg-primary dark:!bg-darkmode-primary;
+  @apply size-4! bg-primary! dark:bg-darkmode-primary!;
 }