轮播图

src/components/Banner/Banner.vue

@@ -10,8 +10,6 @@
         </div>
       </div>
     </div>
-    <!-- Add Pagination -->
-    <div class="swiper-pagination"></div>
   </div>
 </template>
 
@@ -34,18 +32,11 @@ export default {
     let that = this;
     /* eslint-disable */
     let mySwiper = new Swiper('.swiper-container', {
-      slidesPerView: 5,
+      loop: true, // 循环模式选项
-      spaceBetween: -100,
+      autoplay: true,//自动循环
-      centeredSlides: true,
+      slidesPerView: 3.8, //设置slider容器能够同时显示的slides数量(carousel模式)。
-      loop: true,
+      spaceBetween: -160, //在slide之间设置距离（单位px）。
-      pagination: {
+      centeredSlides: true, //设置活动块居中
-        el: '.swiper-pagination',
-        clickable: true,
-      },
-      autoplay: {
-          stopOnLastSlide: true,
-          delay: 1000
-      },
     });
   },
 };
@@ -54,34 +45,36 @@ export default {
 <style lang="less" scoped>
 .swiper-container{
   width: 100%;
-      height: 100%;
   overflow: hidden;
 }
+
 .swiper-slide {
   text-align: center;
-      font-size: 18px;
+  height: 76%;
-      background: #fff;
-
-      /* Center slide text vertically */
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
   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);
+  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;
   width: 520px;