valaxy-theme-hairy 1.2.0 → 1.2.1

package/components/third/HairySwiperCarousel.vue

@@ -1,28 +1,40 @@
 <script lang="ts" setup>
 import images from '@hairy:images:home'
 import { Swiper, SwiperSlide } from 'swiper/vue'
+import { ref } from 'vue'
 import { Autoplay, EffectFade } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/autoplay'
 import 'swiper/css/effect-fade'
+import 'swiper/element/css/virtual'
 
 images.sort(() => Math.random() - 0.5)
+const cur = ref<number>(0)
 </script>
 
 <template>
   <Swiper
-    effect="fade" :speed="2000" :fade-effect="{ crossFade: true }" :modules="[Autoplay, EffectFade]"
-    :slides-per-view="1" :space-between="50" :autoplay="{
-      delay: 4000,
-    }" class="HairyCarousel swiper-no-swiping"
+    class="HairyCarousel swiper-no-swiping transition-none"
+    :fade-effect="{ crossFade: true }"
+    :modules="[Autoplay, EffectFade]"
+    :autoplay="{ delay: 4000 }"
+    :slides-per-view="1"
+    :space-between="50"
+    :speed="2000"
+    effect="fade"
+    :lazy-preload-prev-next="3"
+    @slide-change="cur = $event.activeIndex"
   >
-    <SwiperSlide v-for="(item, index) in images" :key="index" class="w-full h-full">
-      <img class="w-full h-full object-cover" :src="item">
+    <SwiperSlide v-for="(item, index) in images.slice(0, 5)" :key="index" lazy class="w-full h-full">
+      <img v-if="[cur - 1, cur, cur + 1].includes(index)" class="w-full h-full object-cover" :src="item" loading="lazy">
     </SwiperSlide>
   </Swiper>
 </template>
 
 <style lang="scss">
+.swiper-lazy-preloader {
+  display: none !important;
+}
 .HairyCarousel {
   &::before {
     content: '';

package/library/loading.ts

@@ -4,31 +4,19 @@ import type { ViteSSGContext } from 'vite-ssg'
 import Seto from '../styles/fonts/Seto.ttf?url'
 import { createDeferred } from '../utils'
 
-export const fontFaceDeferred = createDeferred<void>()
+let el: HTMLElement
+
+showFullLoading()
+
+export const deferred = createDeferred<void>()
 
 export function install({ router }: ViteSSGContext) {
-  showFullLoading()
   loadFonts('Seto', Seto)
-  router.afterEach(() => {
-    fontFaceDeferred.then(hideFullLoading)
-  })
+  router.afterEach(() => deferred.then(hideFullLoading))
 }
 
 export const isLoading = ref(false)
 
-let el: HTMLElement
-
-function createElement() {
-  const loadingEl = document.createElement('div')
-  loadingEl.className = 'hy-loading'
-  loadingEl.innerHTML = `\
-<div class="wrapper">
-  <div id="preloader"></div>
-</div>
-`
-  return loadingEl
-}
-
 function showFullLoading() {
   if (typeof window === 'undefined')
     return
@@ -61,6 +49,17 @@ function loadFonts(fontFamily: string, url: string) {
   const font = new FontFace(fontFamily, `url(${url})`)
   font.load().then(() => {
     ;(document.fonts as any).add(font)
-    fontFaceDeferred.resolve()
+    deferred.resolve()
   })
 }
+
+function createElement() {
+  const loadingEl = document.createElement('div')
+  loadingEl.className = 'hy-loading'
+  loadingEl.innerHTML = `\
+<div class="wrapper">
+  <div id="preloader"></div>
+</div>
+`
+  return loadingEl
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "packageManager": "pnpm@8.15.8",
   "author": {
     "email": "wwu710632@gmail.com",