轮播图

src/components/Banner/Banner.vue

@@ -10,8 +10,6 @@
         </div>
       </div>
     </div>
-    <!-- Add Pagination -->
-    <div class="swiper-pagination"></div>
   </div>
 </template>
 
@@ -34,53 +32,48 @@ export default {
     let that = this;
     /* eslint-disable */
     let mySwiper = new Swiper('.swiper-container', {
-      slidesPerView: 5,
-      spaceBetween: -100,
-      centeredSlides: true,
-      loop: true,
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-      },
-      autoplay: {
-          stopOnLastSlide: true,
-          delay: 1000
-      },
+      loop: true, // 循环模式选项
+      autoplay: true,//自动循环
+      slidesPerView: 3.8, //设置slider容器能够同时显示的slides数量(carousel模式)。
+      spaceBetween: -160, //在slide之间设置距离（单位px）。
+      centeredSlides: true, //设置活动块居中
     });
   },
 };
 </script>
 
 <style lang="less" scoped>
-.swiper-container {
+.swiper-container{
   width: 100%;
-      height: 100%;
   overflow: hidden;
-    }
-    .swiper-slide {
-      text-align: center;
-      font-size: 18px;
-      background: #fff;
+}
 
-      /* Center slide text vertically */
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
+.swiper-slide {
+  text-align: center;
+  height: 76%;
   display: flex;
-      -webkit-box-pack: center;
-      -ms-flex-pack: center;
-      -webkit-justify-content: center;
   justify-content: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      -webkit-align-items: center;
   align-items: center;
   transition: 300ms;
-	  transform: scale(0.8);
-    }
-	.swiper-slide-active,.swiper-slide-duplicate-active{
+  transform: scale(0.6);
+}
+
+.swiper-slide-active,.swiper-slide-duplicate-active {
   transform: scale(1);
-	}
+}
+
+.swiper-slide-next{
+  transform: scale(0.8);
+  z-index: 998 !important;
+}
+
+.swiper-slide-prev{
+  transform: scale(0.8);
+}
+
+.swiper-slide-active {
+  z-index: 999 !important;
+}
 
 .rotation-box {
   position: relative;