casourle

v3/src/components/widgets/Carousel.jsx

@@ -0,0 +1,39 @@
+/* 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}
+      onSlideChange={() => console.log('slide change')}
+      onSwiper={(swiper) => console.log(swiper)}
+      pagination={{ clickable: true }}
+      style={{
+        '--swiper-pagination-bullet-inactive-color': '#fff',
+        '--swiper-pagination-bullet-size': '12px',
+      }}
+      mousewheel={{ forceToAxis: true, sensitivity: 0.1, releaseOnEdges: true }}
+      autoplay={{
+        delay: 2500,
+        disableOnInteraction: true,
+      }}
+      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;

v3/src/components/widgets/Header.astro

@@ -157,7 +157,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
                 title="If you like RustDesk, give us a star."
                 href="https://github.com/rustdesk/rustdesk"
               >
-                <span class="w-[5.6rem] h-[1.25rem] bg-contain bg-[url(https://img.shields.io/github/stars/rustdesk/rustdesk.svg?style=social&label=Stars&maxAge=86400)]" />
+                <span class="w-[5.6rem] h-[1.25rem] bg-cover bg-[url(https://img.shields.io/github/stars/rustdesk/rustdesk.svg?style=social&label=Stars&maxAge=86400)]" />
               </a>
             )
           }