轮播图

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,
+      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
-      },
     });
   },
 };
 </script>
 
 <style lang="less" scoped>
-.swiper-container {
+.swiper-container{
-      width: 100%;
+  width: 100%;
-      height: 100%;
+  overflow: hidden;
-      overflow: hidden;
+}
-    }
-    .swiper-slide {
-      text-align: center;
-      font-size: 18px;
-      background: #fff;
 
-      /* Center slide text vertically */
+.swiper-slide {
-      display: -webkit-box;
+  text-align: center;
-      display: -ms-flexbox;
+  height: 76%;
-      display: -webkit-flex;
+  display: flex;
-      display: flex;
+  justify-content: center;
-      -webkit-box-pack: center;
+  align-items: center;
-      -ms-flex-pack: center;
+  transition: 300ms;
-      -webkit-justify-content: center;
+  transform: scale(0.6);
-      justify-content: center;
+}
-      -webkit-box-align: center;
+
-      -ms-flex-align: center;
+.swiper-slide-active,.swiper-slide-duplicate-active {
-      -webkit-align-items: center;
+  transform: scale(1);
-      align-items: center;
+}
-	  transition: 300ms;
+
-	  transform: scale(0.8);
+.swiper-slide-next{
-    }
+  transform: scale(0.8);
-	.swiper-slide-active,.swiper-slide-duplicate-active{
+  z-index: 998 !important;
-      transform: scale(1);
+}
-	}
+
+.swiper-slide-prev{
+  transform: scale(0.8);
+}
+
+.swiper-slide-active {
+  z-index: 999 !important;
+}
 
 .rotation-box {
   position: relative;