移动端图片热点 用按钮翻页功能

src/views/HomeMobile.vue

@@ -57,6 +57,8 @@
           </div>
         </div>
         <div class="swiper-pagination" />
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
       </div>
     </div>
 
@@ -293,6 +295,10 @@ export default {
         pagination: {
           el: '.swiper-pagination',
         },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
 
         on: {
           // 自动播放
@@ -465,6 +471,28 @@ export default {
         .cur {
         }
       }
+      .swiper-button-prev {
+        left: 10px;
+        width: 20px;
+        background-image: url(../assets/images/arrow-left.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        &::after {
+          content: '';
+        }
+      }
+      .swiper-button-next {
+        right: 10px;
+        width: 20px;
+        background-image: url(../assets/images/arrow-right.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        &::after {
+          content: '';
+        }
+      }
     }
   }
   .swiper-wrapper-mine.video-wrap {