mirror of
https://github.com/10h30/astroplate.git
synced 2026-06-05 15:08:00 +09:00
added astro-swiper instead of js swiper
This commit is contained in:
Somrat
+17
-17
@@ -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/mdx": "4.3.12",
|
||||
"@astrojs/check": "0.9.6",
|
||||
"@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-dom": "^19.2.0",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-icons": "^5.5.0",
|
||||
"remark-collapse": "^0.1.2",
|
||||
"remark-toc": "^9.0.0",
|
||||
"swiper": "^12.0.3",
|
||||
"vite": "^7.2.2",
|
||||
"sharp": "^0.34.5"
|
||||
"sharp": "^0.34.5",
|
||||
"vite": "^7.2.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
"@types/node": "24.10.1",
|
||||
"@types/react": "19.2.6",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@types/node": "24.10.3",
|
||||
"@types/react": "19.2.7",
|
||||
"@types/react-dom": "19.2.3",
|
||||
"concurrently": "^9.2.1",
|
||||
"eslint": "^9.39.1",
|
||||
"prettier": "^3.6.2",
|
||||
"eslint": "^9.39.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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<div class="swiper-wrapper">
|
||||
<Swiper options={swiperOptions} class="testimonial-slider">
|
||||
<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>
|
||||
<div class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center" />
|
||||
</div>
|
||||
</SwiperWrapper>
|
||||
<SwiperPagination class="testimonial-slider-pagination flex items-center justify-center" />
|
||||
</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>
|
||||
|
||||
+2
-2
@@ -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!;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user