jeawin-astro 3.0.90 → 3.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jeawin-astro",
-    "version": "3.0.90",
+    "version": "3.0.91",
     "author": "chaegumi <chaegumi@qq.com>",
     "description": "",
     "license": "MIT",

package/src/components/detail_images.astro

@@ -46,7 +46,7 @@ let num = 0;
 if(nodepics && nodepics.length > 1){
   num=num+nodepics.length;
 }
-if(video){
+if(video && video.poster){
   num = num + 1;
 }
 if(view360){
@@ -68,6 +68,11 @@ if(num > 1){
           if(iframe){
             iframe.src = iframe.src;
           }
+
+          const video = this.$refs.video.querySelector('video');
+          if(video){
+            video.pause();
+          }
         }
         this.isVideoPoppedUp = false;
       },
@@ -110,7 +115,7 @@ if(num > 1){
               }
 
               {
-                video ? (
+                video && video.poster ? (
                   <swiper-slide class="swiper-slide lg:flex-0 lg:h-[60px] lg:w-[60px] hidden">
                     <div class="content-wrapper border border-white min-h-[100px] lg:min-h-[60px] p-1 cursor-pointer flex items-center justify-center">
                       <Icon name="fa6-solid:file-video" class="size-10" />
@@ -155,7 +160,7 @@ if(num > 1){
           }
 
           {
-            video ? (
+            video && video.poster ? (
               <swiper-slide class="swiper-slide hidden" lazy="true">
                 <div class="flex min-h-[343px] xl:min-h-[605px] w-full">
                   <img src={video.poster} alt={video.title ? video.title : node_title} />
@@ -188,7 +193,7 @@ if(num > 1){
 
         </swiper-container>
         {
-          video ? (
+          video && video.poster ? (
             <div x-ref="video" 
               x-bind:class="{ 'flex': isVideoPoppedUp, 'hidden': !isVideoPoppedUp }"
               class="fixed inset-0 w-full h-full flex items-center justify-center hidden z-[100000]"

package/src/components/detail_images_splide.astro

@@ -0,0 +1,413 @@
+---
+/**
+ * 产品详情页图片展示组件-splide版
+ *
+ * jeawin-astro/src/components/detail_images_splide.astro
+ *
+ * @package jeawin-astro
+ * @author		Chaegumi
+ * @copyright	Copyright (c) 2025-2099 jeawin.com
+ * @email		chaegumi@jeawin.com
+ * @filesource
+ */
+import { Icon } from "astro-icon/components";
+import Youtube from "./youtube.astro";
+import Vimeo from "./vimeo.astro";
+import { img_add_link, render_value,img_change_attrs } from "../scripts/util.js";
+import view360img from "../assets/images/360_view.svg";
+import IframeVideo from "./iframe_video.astro";
+import JeawinImage from "./image.astro";
+
+type JWVIDEO = {
+  poster: string; // 图片
+  type: string; // [local, remote, code]
+  local_url?: string; // 本地视频地址
+  platform?: string; // 平台youtube,vimeo
+  id?: string; // 平台上的视频id或者远程地址
+  params?: any; // 参数
+  title?: any; // 标题
+  code?: any; // 视频的代码，如<iframe>
+};
+interface Props {
+  node_title?: any; 
+  nodepics?: any[]; // 产品图片
+  video?: JWVIDEO; // 产品视频
+  view360?: any; // 360 view
+  thumbs_position?: string;
+}
+const { node_title, nodepics = [], video, view360 } = Astro.props;
+
+const thumbs_position: string = 'bottom';
+
+let show_thumbs = false;
+
+let num = 0;
+
+if(nodepics && nodepics.length > 1){
+  num=num+nodepics.length;
+}
+if(video && video.poster){
+  num = num + 1;
+}
+if(view360){
+  num = num + 1;
+}
+
+if(num > 1){
+  show_thumbs = true;
+}
+---
+
+<custom-detail-images 
+  data-nodepics={nodepics} 
+  data-video={video} 
+  data-view360={view360} 
+  data-thumbs_position={thumbs_position}  
+  data-show_thumbs={show_thumbs}
+>
+  <div 
+    x-data={`{
+      isVideoPoppedUp:false,
+      closeVideo(){
+        if(this.$refs.video){
+          const iframe = this.$refs.video.querySelector('iframe');
+          if(iframe){
+            iframe.src = iframe.src;
+          }
+          
+          const video = this.$refs.video.querySelector('video');
+          if(video){
+            video.pause();
+          }
+        }
+        this.isVideoPoppedUp = false;
+      },
+      openVideo(){
+        this.isVideoPoppedUp = true;
+      }
+    }`}
+  >
+    <div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-4"]}>
+
+
+        <section class="mainSplide splide" aria-label={node_title}>
+          <div class="splide__track">
+            <ul class="splide__list">
+              {
+                nodepics.map((pic: any, idx: number) => (
+                  <li class:list={["splide__slide"]}>
+                    <div class="magnifier">
+<JeawinImage img_html={pic} loading={idx > 0 ? "lazy" : "eager"} fetchpriority={idx > 0 ? 'low' : 'high'} />
+                    </div>
+                    
+                  </li>
+                ))
+              }
+
+              {
+                video && video.poster ? (
+                  <li class="splide__slide">
+                    <div class="flex min-h-[343px] xl:min-h-[605px] w-full">
+                      <img src={video.poster} alt={video.title ? video.title : node_title} />
+                      <button
+                        class="absolute cursor-pointer w-16 h-16 rounded-full inset-0 m-auto duration-150 bg-blue-500 hover:bg-blue-600 ring-offset-2 focus:ring-3 focus:ring-blue-500 text-white"
+                        x-on:click="openVideo()"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          class="w-6 h-6 m-auto"
+                        >
+                          <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+                        </svg>
+                      </button>
+                    </div>
+                  </li>
+                ) : null
+              }
+
+              {
+                view360 ? (
+                  <li class="splide__slide no-drag">
+                    <div class="cloudimage-360 swiper-no-swiping no-drag" data-image-list-x={`${JSON.stringify(view360)}`} data-magnifier="2" data-fullscreen>
+                    </div>
+                  </li>    
+                ) : null
+              }
+            </ul>
+          </div>
+        </section>
+        {show_thumbs ? (
+          <section class="thumbnailSplide splide w-full px-8" aria-label={node_title}>
+            <div class="splide__track">
+              <ul class="splide__list">
+                {
+                  nodepics.map((pic: any, idx: number) => (
+                    <li class="splide__slide">
+                      <div class="content-wrapper border border-white p-1 h-full cursor-pointer overflow-hidden flex items-center justify-center">
+                        <JeawinImage img_html={pic} add_classes="lazyload" />
+                      </div>
+                    </li>
+                  ))
+                }
+
+                {
+                  video && video.poster ? (
+                    <li class="splide__slide">
+                      <div class="content-wrapper border border-white p-1 h-full cursor-pointer flex items-center justify-center">
+                        <Icon name="fa6-solid:file-video" class="size-10" />
+                      </div>
+                    </li>
+                  ) : null
+                }
+
+                {
+                  view360 ? (
+                    <li class="splide__slide">
+                      <div class="content-wrapper border border-white p-1 h-full cursor-pointer">
+                        <img src={view360img.src} alt="360° viewer" />
+                      </div>
+                    </li>
+                  ) : null
+                }
+              </ul>
+            </div>
+          </section>          
+        ) : null}
+
+        {
+          video && video.poster ? (
+            <div x-ref="video" 
+              x-bind:class="{ 'flex': isVideoPoppedUp, 'hidden': !isVideoPoppedUp }"
+              class="fixed inset-0 w-full h-full flex items-center justify-center hidden z-[100000]"
+            >
+              <div
+                class="absolute inset-0 w-full h-full bg-black/50"
+                x-on:click="closeVideo()"
+              >
+              </div>
+              <div class="px-4 relative">
+                <button
+                  class="w-12 h-12 mb-5 rounded-full duration-150 bg-gray-800 hover:bg-gray-700 text-white cursor-pointer"
+                  x-on:click="closeVideo()"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    class="w-5 h-5 m-auto"
+                  >
+                    <path
+                      d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+                    ></path>
+                  </svg>
+                </button>
+                {
+                  video.type == 'remote' ? (
+                    <Fragment>
+                      {render_value(video, 'id') ? (
+                        <Fragment>
+                          {
+                            video.platform == 'youtube' ? (
+                              <Youtube id={render_value(video, 'id')} />
+                            ) : video.platform == 'vimeo' ? (
+                              <Vimeo id={render_value(video, 'id')} />
+                            ) : (
+                              <IframeVideo id={render_value(video, 'id')} />
+                            )
+                          }                          
+                        </Fragment>
+                      ) : null}
+                      
+                    </Fragment>
+                  ) : video.type == 'code' ? (
+                    <Fragment set:html={video.code} />
+                  ) : (
+                    <video class="rounded-lg w-full max-w-2xl" controls>
+                      <source src={video.local_url} type="video/mp4" />
+                    </video>
+                  )
+                }
+              </div>
+            </div>            
+          ) : null
+        }
+    </div>
+  </div>
+</custom-detail-images>
+<script
+is:inline
+src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
+></script>  
+{
+  view360 ? (
+    <Fragment>
+      <script is:inline>
+        window.CI360 = { notInitOnLoad: true };
+      </script>
+    
+    </Fragment>
+  ) : null
+}
+<style is:inline>
+    .mainSplide{
+        width:100%;
+        height:10%;
+    }
+    .splide{
+        margin:0 auto;
+    }
+    .splide__slide img{
+        width:100%;
+        /* height: auto; */
+        height:100%;
+        object-fit: cover;
+    }
+    .splide__slide {
+        opacity: 0.6;
+    }
+
+    .splide__slide.is-active {
+        opacity: 1;
+    }
+    .splide__arrows{
+      /* position: relative; */
+    }
+    .splide__arrow--prev{
+      left:-0.5rem;
+      /* transform: scaleX(-1) translateY(-50%); */
+      /* top: 50%; */
+      /* transform: translate3d(0, -50%, 0); */
+    }
+    .splide__arrow--next{
+      right:-0.5rem;
+      /* transform: translateY(-50%); */
+    }
+</style>
+<style is:inline>
+  .cloudimage-360-fullscreen-modal{
+    z-index:100000!important;
+  }
+</style>
+
+<script>
+  import _ from 'lodash';
+  import Splide from "@splidejs/splide";
+  import { magnify} from "../scripts/magnify.js";
+
+  class CustomDetailImages extends HTMLElement {
+    isMagnifyOpen = false;
+    glass: any = null;
+
+    container: any = null;
+
+    magnify(event:any, currentOriginalImage: any){
+      event.stopPropagation();
+
+      if(this.isMagnifyOpen) return;
+
+      this.isMagnifyOpen = true;
+
+      currentOriginalImage.onload = () => {
+        if(this.glass){
+          this.glass.style.cursor = 'none';
+        }
+      }
+
+      this.glass = document.createElement('div');
+
+      this.glass.addEventListener('click', (e:any) => {
+        e.stopPropagation();
+        this.closeMagnifier();
+      })
+
+      this.container.style.overflow = 'hidden';
+
+      magnify(this.container, {x:0,y:0}, currentOriginalImage, this.glass, 3);
+
+    }
+
+    closeMagnifier(){
+
+      if(!this.glass) return;
+
+      this.container.style.overflow = 'visible';
+      this.container.style.zIndex = 100000;
+      this.container.removeChild(this.glass);
+
+      this.glass = null;
+      this.isMagnifyOpen = false;
+    }
+
+    constructor() {
+      super();
+
+      const magnifiers = this.querySelectorAll('.magnifier');
+      magnifiers.forEach((elem) => {
+        elem.addEventListener('click', (e) =>{
+          this.container = elem;
+          this.magnify(e, elem.querySelector('img'));
+        });
+      })
+
+      const view360 = this.dataset.view360;
+      
+      const elemMain: any = this.querySelector('.mainSplide');
+      const main = new Splide(elemMain, {
+          type: 'fade',
+          rewind: true,
+          pagination: false,
+          arrows: false,
+          noDrag: 'input, textarea, .no-drag',
+          drag: false
+      });
+      const show_thumbs = this.dataset.show_thumbs;
+      // console.log(show_thumbs);
+      if(show_thumbs == 'true'){
+        const elemThumbnail: any = this.querySelector('.thumbnailSplide');
+        const thumbnails = new Splide(elemThumbnail,{
+            // width:'100vw',
+            // height:'100vh',
+            fixedWidth:100,
+            fixedHeight: 100,
+            gap:10,
+            rewind:true,
+            pagination: false,
+            cover: true,
+            // heightRatio: 0.5,
+            // focus: 'center',
+            // perPage: 2,
+            isNavigation: true,
+            breakpoints:{
+                640:{
+                    perPage:1,
+                    fixedWidth: 60,
+                    fixedHeight: 60
+                }
+            }
+        });
+        main.sync(thumbnails);
+        main.mount();
+        thumbnails.mount();
+      }else{
+        main.mount();
+      }
+
+      const thisSelf = this;
+
+     main.on("move", (e: any) => {
+
+        this.closeMagnifier();
+
+        if(view360){
+          // @ts-ignore
+          window.CI360.init();            
+        }
+
+      });
+    }
+  }
+
+  customElements.define("custom-detail-images", CustomDetailImages);
+</script>

package/src/components/index.ts

@@ -13,6 +13,7 @@ export {default as CommentForm} from "./comment_form.astro";
 export {default as CommonCard} from "./common_card.astro";
 export {default as DefaultImage} from "./default_image.astro";
 export {default as DetailImages} from "./detail_images.astro";
+export {default as DetailImagesSplide} from "./detail_images_splide.astro";
 export {default as FilterLinksHtml} from "./filter_links_html.astro";
 export {default as FilterLinks} from "./filter_links.astro";
 export {default as Form} from "./form.astro";

package/src/components/slide/image_carousel.astro

@@ -0,0 +1,66 @@
+---
+import '@splidejs/splide/css';
+---
+<image-carousel>
+    <section class="splide" aria-label="Beautiful Images">
+        <div class="splide__track">
+            <ul class="splide__list">
+                <li class="splide__slide">
+                    <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="" />
+                    <div>
+                        Description 01
+                    </div>
+                </li>
+                <li class="splide__slide">
+                    <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/818bfcbea4bb3fe5d3f641fb06337661/google-seo-2025_VuQ5Ea-1920x1097.webp" alt="" />
+                    <div>
+                        Description 02
+                    </div>
+                </li>
+                <li class="splide__slide">
+                    <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/586833e9e667e28f577b2b6b30486a3f/choosing-the-right-google-seo-company_Qwixn6-960x540.webp" alt="" />
+                    <div>
+                        Description 03
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </section>    
+</image-carousel>
+
+<style>
+    .splide__slide img{
+        width:100%;
+        /* height: auto; */
+        height:100%;
+        object-fit: cover;
+    }
+</style>
+<script>
+    import Splide from "@splidejs/splide";
+
+    class ImageCarousel extends HTMLElement{
+        constructor(){
+            super()
+        }
+
+        connectedCallback() {
+            const elem: any = this.querySelector('.splide');
+            const splide = new Splide(elem,{
+                // width:'100vw',
+                // height:'100vh',
+                cover: true,
+                heightRatio: 0.3,
+                // perPage: 2,
+                // breakpoints:{
+                //     640:{
+                //         perPage:1
+                //     }
+                // }
+            });
+            splide.mount();
+        }
+    }
+
+    customElements.define('image-carousel', ImageCarousel);
+</script>

package/src/components/slide/splide_gallery.astro

@@ -0,0 +1,126 @@
+---
+import '@splidejs/splide/css';
+---
+<splide-gallery>
+    <section class="main-splide splide" aria-label="My Awesome Gallery">
+        <div class="splide__track">
+            <ul class="splide__list">
+                <li class="splide__slide">
+                    <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="">
+                </li>
+                <li class="splide__slide">
+                    <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/818bfcbea4bb3fe5d3f641fb06337661/google-seo-2025_VuQ5Ea-1920x1097.webp" alt="">
+                </li>
+                <li class="splide__slide">
+                    <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/586833e9e667e28f577b2b6b30486a3f/choosing-the-right-google-seo-company_Qwixn6-960x540.webp" alt="">
+                </li>
+                <li class="splide__slide">
+                    <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="">
+                </li>
+            </ul>
+        </div>
+    </section>
+
+    <ul class="thumbnails">
+        <li class="thumbnail">
+            <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="">
+        </li>
+        <li class="thumbnail">
+            <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/818bfcbea4bb3fe5d3f641fb06337661/google-seo-2025_VuQ5Ea-1920x1097.webp" alt="">
+        </li>
+        <li class="thumbnail">
+            <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/586833e9e667e28f577b2b6b30486a3f/choosing-the-right-google-seo-company_Qwixn6-960x540.webp" alt="">
+        </li>
+        <li class="thumbnail">
+            <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="">
+        </li>
+    </ul>    
+</splide-gallery>
+
+<style>
+.splide{
+    margin:0 auto;
+}
+
+.splide__slide img{
+    width:100%;
+    /* height: auto; */
+    height:100%;
+    object-fit: cover;
+}
+
+.thumbnails {
+  display: flex;
+  margin: 1rem auto 0;
+  padding: 0;
+  justify-content: center;
+}
+
+.thumbnail {
+  width: 70px;
+  height: 70px;
+  overflow: hidden;
+  list-style: none;
+  margin: 0 0.2rem;
+  cursor: pointer;
+  opacity: 0.3;
+}
+
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbnail.is-active {
+  opacity: 1;
+}
+</style>
+<script>
+    import Splide from "@splidejs/splide";
+
+class SplideGallery extends HTMLElement{
+    constructor(){
+        super();
+    }
+
+    connectedCallback() {
+        // @ts-ignore
+        const splide = new Splide( this.querySelector('.main-splide'), {
+            width:600,
+            height:300,
+            pagination: false,
+            cover: true
+        } );
+
+        const thumbnails = this.querySelectorAll( '.thumbnail' );
+        let current: any;
+
+        for ( let i = 0; i < thumbnails.length; i++ ) {
+            initThumbnail( thumbnails[ i ], i );
+        }
+
+        function initThumbnail( thumbnail: any, index: number ) {
+            thumbnail.addEventListener( 'click', function () {
+                splide.go( index );
+            } );
+        }
+
+        splide.on( 'mounted move', function () {
+            const thumbnail: any = thumbnails[ splide.index ];
+
+            if ( thumbnail ) {
+                if ( current ) {
+                    current.classList.remove( 'is-active' );
+                }
+
+                thumbnail.classList.add( 'is-active' );
+                current = thumbnail;
+            }
+        } );
+
+        splide.mount();
+    }
+}
+customElements.define('splide-gallery', SplideGallery);
+</script>

package/src/components/slide/thumbnail_carousel.astro

@@ -0,0 +1,141 @@
+---
+import '@splidejs/splide/css';
+---
+<thumbnail-carousel>
+    <section class="flex flex-col gap-4">
+        <section class="mainSplide splide" aria-label="Beautiful Images">
+            <div class="splide__track">
+                <ul class="splide__list">
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="" />
+                        <div>
+                            Description 01
+                        </div>
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/818bfcbea4bb3fe5d3f641fb06337661/google-seo-2025_VuQ5Ea-1920x1097.webp" alt="" />
+                        <div>
+                            Description 02
+                        </div>
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/586833e9e667e28f577b2b6b30486a3f/choosing-the-right-google-seo-company_Qwixn6-960x540.webp" alt="" />
+                        <div>
+                            Description 03
+                        </div>
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="" />
+                        <div>
+                            Description 01
+                        </div>
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/818bfcbea4bb3fe5d3f641fb06337661/google-seo-2025_VuQ5Ea-1920x1097.webp" alt="" />
+                        <div>
+                            Description 02
+                        </div>
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/586833e9e667e28f577b2b6b30486a3f/choosing-the-right-google-seo-company_Qwixn6-960x540.webp" alt="" />
+                        <div>
+                            Description 03
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </section>  
+        <section class="thumbnailSplide splide" aria-label="Beautiful Images">
+            <div class="splide__track">
+                <ul class="splide__list">
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="" />
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/818bfcbea4bb3fe5d3f641fb06337661/google-seo-2025_VuQ5Ea-1920x1097.webp" alt="" />
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/586833e9e667e28f577b2b6b30486a3f/choosing-the-right-google-seo-company_Qwixn6-960x540.webp" alt="" />
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/c5090173eec68cbaccb1e6b0576de70a/google-seo-guideline-2025_OGx6L4-1643x1062.webp" alt="" />
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/818bfcbea4bb3fe5d3f641fb06337661/google-seo-2025_VuQ5Ea-1920x1097.webp" alt="" />
+                    </li>
+                    <li class="splide__slide">
+                        <img src="https://img.jeawincdn.com/resource/upfiles/245/images/resize/586833e9e667e28f577b2b6b30486a3f/choosing-the-right-google-seo-company_Qwixn6-960x540.webp" alt="" />
+                    </li>
+                </ul>
+            </div>
+        </section>         
+    </section>
+   
+</thumbnail-carousel>
+
+<style>
+    .splide{
+        margin:0 auto;
+    }
+    .splide__slide img{
+        width:100%;
+        /* height: auto; */
+        height:100%;
+        object-fit: cover;
+    }
+    .splide__slide {
+        opacity: 0.6;
+    }
+
+    .splide__slide.is-active {
+        opacity: 1;
+    }
+</style>
+<script>
+    import Splide from "@splidejs/splide";
+
+    class ThumbnailCarousel extends HTMLElement{
+        constructor(){
+            super()
+        }
+
+        connectedCallback() {
+            const elemMain: any = this.querySelector('.mainSplide');
+            const main = new Splide(elemMain, {
+                type: 'fade',
+                rewind: true,
+                pagination: false,
+                arrows: false
+            });
+            const elemThumbnail: any = this.querySelector('.thumbnailSplide');
+            const thumbnails = new Splide(elemThumbnail,{
+                // width:'100vw',
+                // height:'100vh',
+                fixedWidth:100,
+                fixedHeight: 60,
+                gap:10,
+                rewind:true,
+                pagination: false,
+                cover: true,
+                heightRatio: 0.5,
+                // focus: 'center',
+                // perPage: 2,
+                isNavigation: true,
+                breakpoints:{
+                    640:{
+                        perPage:1,
+                        fixedWidth: 60,
+                        fixedHeight: 44
+                    }
+                }
+            });
+            
+
+            main.sync(thumbnails)
+            main.mount();
+            thumbnails.mount();
+        }
+    }
+
+    customElements.define('thumbnail-carousel', ThumbnailCarousel);
+</script>