rustdesk/doc.rustdesk.com
1
0
Fork 0
mirror of https://github.com/rustdesk/doc.rustdesk.com.git synced 2026-04-24 08:57:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

swiper: use astro native component

Browse Source 
Use astro native component for swiper capabilities.

Signed-off-by: Pascal Brand <pascal.brand38@gmail.com>
This commit is contained in:
Pascal Brand
2026-03-25 11:13:07 +01:00
parent ce8d2b77cd
commit f3006e0a1f
15 changed files with 74 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
v3/src/components/widgets/Carousel.astro Normal file
View File

@@ -0,0 +1,43 @@
---
import { Swiper, SwiperWrapper, SwiperSlide, SwiperPagination, SwiperLazyPreloader} from 'astro-swiper';
interface Props {
list: {
src: string;
alt?: string;
class: string;
}[];
}
const { list } = Astro.props;
---
<Swiper
style={{
'--swiper-pagination-bullet-inactive-color': '#fff',
'--swiper-pagination-bullet-inactive-opacity': 0.5,
'--swiper-pagination-bullet-size': '12px',
}}
options={{
spaceBetween: 0,
slidesPerView: 1,
pagination:{
clickable: true,
el: ".swiper-pagination",
},
mousewheel:{ forceToAxis: true, sensitivity: 0.1, releaseOnEdges: true },
autoplay:{
delay: 2500,
disableOnInteraction: true,
},
scrollbar: true
}}
>
<SwiperWrapper>
{list.map((item) => (
<SwiperSlide>
<img src={item.src} class={item.class} loading="lazy" alt={item.alt} />
<SwiperLazyPreloader class="swiper-lazy-preloader-white"></SwiperLazyPreloader>
</SwiperSlide>
))}
</SwiperWrapper>
<SwiperPagination/>
</Swiper>

40
v3/src/components/widgets/Carousel.jsx
View File

@@ -1,40 +0,0 @@
/* https://swiperjs.com/demos */
import 'swiper/css';
import 'swiper/css/pagination';
import { Autoplay, Pagination, Scrollbar, Mousewheel } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
const Carousel = ({ list }) => {
return (
<Swiper
spaceBetween={0}
slidesPerView={1}
pagination={{ clickable: true }}
style={{
'--swiper-pagination-bullet-inactive-color': '#fff',
'--swiper-pagination-bullet-inactive-opacity': 0.5,
'--swiper-pagination-bullet-size': '12px',
}}
mousewheel={{ forceToAxis: true, sensitivity: 0.1, releaseOnEdges: true }}
autoplay={{
delay: 2500,
disableOnInteraction: true,
}}
// https://github.com/nolimits4web/swiper/blob/40a705e5bcadf2ee2ee90591ff9ed95c1aaf9026/src/swiper-element.mjs#L286
// workaround for {true} which cause console error
lazy='true'
scrollbar
modules={[Pagination, Autoplay, Scrollbar, Mousewheel]}
>
{list.map((item, i) => (
<SwiperSlide key={'p' + i}>
<img src={item.src} className={item.className} loading="lazy" alt={item.alt} />
<div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</SwiperSlide>
))}
</Swiper>
);
};
export default Carousel;

3
v3/src/pages/ar/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -45,7 +45,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/de/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -49,7 +49,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/es/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -45,7 +45,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/fr/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -45,7 +45,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -46,7 +46,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/it/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -45,7 +45,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/ja/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -44,7 +44,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/ko/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -44,7 +44,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/pt/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -45,7 +45,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/zh-cn/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -45,7 +45,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },

3
v3/src/pages/zh-tw/index.astro
View File

@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Carousel from '~/components/widgets/Carousel.jsx';
import Carousel from '~/components/widgets/Carousel.astro';
import Note from '~/components/widgets/Note.astro';
const metadata = {
@@ -44,7 +44,6 @@ const metadata = {
<Fragment slot="content">
<br /><br />
<Carousel
client:load
list={[
{ src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
{ src: '/main.png', className: 'rounded-[15px] border border-gray-700' },