jeawin-astro 3.0.55 → 3.0.56

package/package.json

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

package/src/components/detail_images.astro

@@ -32,12 +32,13 @@ interface Props {
   nodepics?: any[]; // 产品图片
   video?: JWVIDEO; // 产品视频
   view360?: any; // 360 view
-  thumbs_position?: any;
 }
-const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } = Astro.props;
+const { node_title, nodepics = [], video, view360 } = Astro.props;
+
+const thumbs_position = 'bottom';
 ---
 
-<custom-detail-images data-nodepics={nodepics} data-video={video} data-view360={view360}>
+<custom-detail-images data-nodepics={nodepics} data-video={video} data-view360={view360} data-thumbs_position={thumbs_position}>
   <div
     x-data={`{
       isVideoPoppedUp:false,
@@ -56,23 +57,24 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
     }`}
   >
     <div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-5"]}>
-      <div class:list={["order-2", {"lg:order-1 lg:w-2/12 lg:flex lg:flex-col":thumbs_position=='left'}, "gap-3"]}>
+      <div class:list={["order-2", {"flex flex-row items-center md:order-1 md:w-2/12 md:flex md:flex-col":thumbs_position=='left',"flex items-center justify-center":thumbs_position=='bottom'}, "gap-3"]}>
         <!-- thumbs swiper -->
+        <div class="flex justify-center cursor-pointer thumbSwiper-prev-btn">{thumbs_position == 'left'?<Icon name="fa6-solid:angle-up" /> :<Icon name="fa6-solid:angle-left" />}</div>
         <swiper-container
           init="false"
           class="thumbSwiper"
           watch-slides-progress="true"
           slides-per-view="5"
           space-between="10"
-          navigation="true"
         >
+          
           {
             nodepics.map((pic: any, idx: number) => (
               <swiper-slide lazy={idx > 0 ? "true" : "false"} 
                 class:list={[
                   "swiper-slide",
                   { hidden: idx > 0 },
-                  " lg:flex-1 lg:h-[60px] lg:w-[60px]",
+                  " lg:flex-0 lg:h-[60px] lg:w-[60px]",
                 ]}
               >
                 <div class="content-wrapper border border-white p-1 cursor-pointer overflow-hidden h-[60px] w-[60px]">
@@ -84,7 +86,7 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
 
           {
             video ? (
-              <swiper-slide lazy="true" class="swiper-slide lg:flex-1 lg:h-[60px] lg:w-[60px] hidden">
+              <swiper-slide lazy="true" 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" />
                 </div>
@@ -94,7 +96,7 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
 
           {
             view360 ? (
-              <swiper-slide lazy="true" class="swiper-slide lg:flex-1 lg:h-[60px] lg:w-[60px] hidden">
+              <swiper-slide lazy="true" class="swiper-slide lg:flex-0 lg:h-[60px] lg:w-[60px] hidden">
                 <div class="content-wrapper border border-white p-1 cursor-pointer">
                   <img src={view360img.src} alt="360° viewer" />
                 </div>
@@ -103,6 +105,7 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
           }
           
         </swiper-container>
+        <div class="flex justify-center cursor-pointer thumbSwiper-next-btn">{thumbs_position =='left'?<Icon name="fa6-solid:angle-down" />:<Icon name="fa6-solid:angle-right" />}</div>
       </div>
       <div class:list={["order-1", {"lg:order-2":thumbs_position=='left'}, "w-full", {"lg:w-10/12":thumbs_position=='left'}]}>
         <!-- main swiper, pass thumbs swiper as CSS selector -->
@@ -113,7 +116,7 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
           slides-per-view="1"
           thumbs-swiper=".thumbSwiper"
           navigation="false"
-          pagination="true"
+          pagination="true" auto-height="true"
         >
           {
             nodepics.map((pic: any, idx: number) => (
@@ -217,7 +220,6 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
     </div>
   </div>
 </custom-detail-images>
-
 <script
 is:inline
 src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js" async defer
@@ -233,11 +235,13 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
   ) : null
 }
 <style is:inline>
-  /*
+
   .thumbSwiper {
-    height: 533px;
+    max-height: 300px;
+    max-width:300px;
+    overflow: hidden;
   }
-    */
+  
 
   .thumbSwiper .swiper-slide img {
     /* object-fit: contain; */
@@ -343,10 +347,14 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
 
       initSwiper(".mainSwiper");
       initSwiper(".thumbSwiper", {
-        direction: "horizontal",
+        direction: this.dataset.thumbs_position=='left' ? "vertical" : 'horizontal',
+        navigation: {
+          prevEl: '.thumbSwiper-prev-btn',
+          nextEl: '.thumbSwiper-next-btn'
+        },
         breakpoints: {
-          1024: {
-            direction: "vertical",
+          768: {
+            direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
           },
         },
         on:{
@@ -402,7 +410,7 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
           direction: "horizontal",
           breakpoints: {
             1024: {
-              direction: "vertical",
+              direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
             },
           },
           on:{