diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index be81ba20..10eebfe4 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -622,21 +622,65 @@ body.page-account .account-card .order-wrap .text {
   font-size: 1rem;
 }
 
+body.page-product .product-image .swiper {
+  height: 538px;
+}
+body.page-product .product-image .swiper:hover .swiper-pager > div {
+  background-color: rgba(255, 255, 255, 0.548);
+  opacity: 1;
+}
+body.page-product .product-image .swiper:hover .swiper-pager > div:hover {
+  background-color: rgb(255, 255, 255);
+}
 body.page-product .product-image .left {
   margin-right: 1rem;
 }
-body.page-product .product-image .left > div {
+body.page-product .product-image .left > .swiper > div > div {
   border: 1px solid #eee;
   margin-bottom: 10px;
   width: 80px;
   height: 80px;
   padding: 2px;
-  background-color: #fff;
   cursor: pointer;
 }
-body.page-product .product-image .left > div.active, body.page-product .product-image .left > div:hover {
+body.page-product .product-image .left > .swiper > div > div.active, body.page-product .product-image .left > .swiper > div > div:hover {
   border: 1px solid #3a3a3a;
 }
+body.page-product .product-image .left .swiper-pager > div {
+  opacity: 0;
+  background-color: rgba(255, 255, 255, 0);
+  transition: all 0.5s;
+}
+body.page-product .product-image .left .swiper-pager .swiper-button-next {
+  border: 0;
+  top: 518px;
+  left: 50%;
+  height: 55px;
+  width: 30px;
+  transform-origin: center;
+  transform: rotate(90deg) translate(0, 25%);
+}
+body.page-product .product-image .left .swiper-pager .swiper-button-next:hover, body.page-product .product-image .left .swiper-pager .swiper-button-next.active {
+  border: 0 !important;
+}
+body.page-product .product-image .left .swiper-pager .swiper-button-next::after {
+  font-size: 18px;
+}
+body.page-product .product-image .left .swiper-pager .swiper-button-prev {
+  border: 0;
+  top: 8px;
+  left: 50%;
+  height: 55px;
+  width: 30px;
+  transform-origin: center;
+  transform: rotate(90deg) translate(0, 25%);
+}
+body.page-product .product-image .left .swiper-pager .swiper-button-prev:hover, body.page-product .product-image .left .swiper-pager .swiper-button-prev.active {
+  border: 0 !important;
+}
+body.page-product .product-image .left .swiper-pager .swiper-button-prev::after {
+  font-size: 18px;
+}
 body.page-product .product-image .right {
   border: 1px solid #eee;
 }
diff --git a/resources/beike/shop/default/css/page-product.scss b/resources/beike/shop/default/css/page-product.scss
index f4d80aa0..e59d10f1 100644
--- a/resources/beike/shop/default/css/page-product.scss
+++ b/resources/beike/shop/default/css/page-product.scss
@@ -2,22 +2,77 @@
 
 body.page-product {
   .product-image {
+    .swiper {
+      height: 538px;
+      &:hover {
+        .swiper-pager > div {
+          background-color: rgba(255, 255, 255, 0.548);
+          opacity: 1;
+          &:hover {
+            background-color: rgba(255, 255, 255);
+          }
+        }
+      }
+    }
     .left {
       margin-right: 1rem;
 
-      > div {
+      > .swiper > div > div{
         border: 1px solid #eee;
         margin-bottom: 10px;
         width: 80px;
         height: 80px;
         padding: 2px;
-        background-color: #fff;
         cursor: pointer;
 
         &.active, &:hover {
           border: 1px solid #3a3a3a;
         }
       }
+
+      .swiper-pager {
+        > div {
+          opacity: 0;
+          background-color: rgba(255, 255, 255, 0);
+          transition: all .5s;
+        }
+        .swiper-button-next {
+          border: 0;
+          top: 518px;
+          left: 50%;
+
+          height: 55px;
+          width: 30px;
+          transform-origin: center;
+          transform: rotate(90deg) translate(0,25%);
+
+          &:hover,&.active {
+            border: 0 !important;
+          }
+
+          &::after {
+            font-size: 18px;
+          }
+        }
+
+        .swiper-button-prev{
+          border: 0;
+          top: 8px;
+          left: 50%;
+          height: 55px;
+          width: 30px;
+          transform-origin: center;
+          transform: rotate(90deg) translate(0,25%);
+
+          &:hover,&.active {
+            border: 0 !important;
+          }
+
+          &::after {
+            font-size: 18px;
+          }
+        }
+      }
     }
 
     .right {
diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php
index 58956db6..cb17b64e 100644
--- a/themes/default/product.blade.php
+++ b/themes/default/product.blade.php
@@ -20,9 +20,15 @@
       <div class="col-12 col-md-6">
         <div class="product-image d-flex align-items-start">
 
-          <div class="left swiper mySwiper" v-if="images.length">
-            <div class="swiper-wrapper">
-              <div class="swiper-slide" :class="!index ? 'active' : ''" :data-image="image.image" v-for="image, index in images"><img :src="image.thumb" class="img-fluid"></div>
+          <div class="left" v-if="images.length">
+            <div class="swiper mySwiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide" :class="!index ? 'active' : ''" :data-image="image.image" v-for="image, index in images"><img :src="image.thumb" class="img-fluid"></div>
+              </div>
+              <div class="swiper-pager">
+                  <div class="swiper-button-next new-feature-slideshow-next"></div>
+                  <div class="swiper-button-prev new-feature-slideshow-prev"></div>
+              </div>
             </div>
           </div>
 
@@ -254,10 +260,26 @@
       }
     });
 
-    $("body").on("mouseover", ".product-image .left > div", function() {
+    $("body").on("mouseover", ".product-image .left > .swiper > div > div", function() {
       const image = $(this).data('image')
       $('.product-image .right').find('img').attr('src', image);
       $(this).addClass('active').siblings().removeClass('active');
     });
+
+    var swiper = new Swiper(".mySwiper", {
+      direction: "vertical",
+      slidesPerView: 6,
+      spaceBetween:10,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      observer: true,
+    });
+
   </script>
 @endpush