Selaa lähdekoodia

feat: 低压柜轮播 增加 左右切换箭头

yunxing 4 vuotta sitten
vanhempi
commit
71a8c5920c
1 muutettua tiedostoa jossa 20 lisäystä ja 16 poistoa
  1. 20 16
      src/components/equipmentFacilities/MSwiper.vue

+ 20 - 16
src/components/equipmentFacilities/MSwiper.vue

@@ -10,6 +10,8 @@
             >{{detail.drawernum}}</div>
         </swiper-slide>
         <div class='swiper-pagination' slot='pagination'></div>
+        <div class='swiper-button-prev' slot='button-prev'></div>
+        <div class='swiper-button-next' slot='button-next'></div>
         <!-- 如果需要滚动条 -->
         <!-- <div class='swiper-scrollbar'></div> -->
     </swiper>
@@ -53,8 +55,10 @@ export default {
                     el: '.swiper-pagination',
                     clickable: false,
                     type: 'fraction',
-                    // bulletClass: 'my-bullet',
-                    // bulletActiveClass: 'my-bullet-active',
+                },
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
                 },
                 // on: {
                 //     click: function (event) {
@@ -152,21 +156,21 @@ export default {
     color: #fff !important;
 }
 
-/deep/ .my-bullet {
-    width: 0.21333rem;
-    height: 0.21333rem;
-    border-radius: 100%;
-    background: #80add4;
-    opacity: 0.2;
-    margin: 0 3px;
-    display: none;
+.swiper-button-prev,
+.swiper-button-next {
+    top: initial !important;
+    bottom: 0;
+    width: 15px !important;
+    height: 12px !important;
+}
+.swiper-button-prev {
+    left: 0;
 }
-/deep/ .my-bullet:nth-child(1),
-/deep/ .my-bullet:nth-child(2),
-/deep/ .my-bullet:nth-child(3) {
-    display: inline-block;
+.swiper-button-next {
+    right: 0;
 }
-/deep/ .my-bullet-active {
-    background: #80add4;
+.swiper-button-prev:after,
+.swiper-button-next:after {
+    font-size: 14px !important;
 }
 </style>