123

src/components/Trumbs/index.vue

@@ -24,6 +24,26 @@
           </div>
         </div>
       </swiper-slide>
+      <div
+        class="swiper-button-prev"
+        @click="preSwiper"
+        v-if="
+          (props.isCase
+            ? case_detail_img_data[industry_id]
+            : hard_img_data[hardware_id]
+          )?.length > 7 && sw.activeIndex != 0
+        "
+      ></div>
+      <div
+        class="swiper-button-next"
+        @click="nextSwiper"
+        v-if="
+          (props.isCase
+            ? case_detail_img_data[industry_id]
+            : hard_img_data[hardware_id]
+          )?.length > 7 && !sw.isEnd
+        "
+      ></div>
     </swiper>
   </div>
 </template>
@@ -44,7 +64,18 @@ import 'swiper/css/free-mode'
 import 'swiper/css/navigation'
 // import required modules
 import { FreeMode, Navigation } from 'swiper'
-
+const preSwiper = () => {
+  const { activeIndex } = sw.value
+  if (activeIndex != 0) {
+    sw.value.slidePrev(500, false)
+  }
+}
+const nextSwiper = () => {
+  const { isEnd } = sw.value
+  if (!isEnd) {
+    sw.value.slideNext(500, false)
+  }
+}
 const detailStore = useDetailStore()
 const { industry_id, hardware_id } = storeToRefs(detailStore)
 const myEmit = defineEmits(['onMySonFunc'])
@@ -79,6 +110,12 @@ const onSwiper = swiper => {
 .trumbs_container {
   width: 100%;
   height: 108px;
+  .swiper-button-prev {
+    background: url(../../assets/img/swiper/left.png) no-repeat;
+  }
+  .swiper-button-next {
+    background: url(../../assets/img/swiper/right.png) no-repeat;
+  }
   .img_card {
     min-width: 194px;
     width: 194px;
@@ -126,4 +163,9 @@ const onSwiper = swiper => {
     opacity: 1;
   }
 }
+.story-navi--prev {
+  background: #283fe7;
+  width: 20px;
+  height: 20px;
+}
 </style>

src/style.scss

@@ -179,3 +179,9 @@ body {
 .ignore-min-width {
   min-width: 1280px;
 }
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  font-size: 0;
+  display: none;
+}