首页轮播循环

app.html

@@ -5,6 +5,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
+  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
   {{ HEAD }}
   <script>
     (function (w, d) {

components/home/Carousel.vue

@@ -32,13 +32,20 @@
           mousewheelControl: false,
           effect: 'fade',
           lazyLoading: true,
+          loop: true,
           prevButton: '.swiper-button-prev',
           nextButton: '.swiper-button-next',
           onTransitionStart: (swiper) => {
             // 不要通过vue刷新dom，会导致pagination无法刷新
             // this.activeSlide = swiper.activeIndex
+            if (this.banners.data.length && swiper.activeIndex > this.banners.data.length) {
+              swiper.activeIndex = 1
+            }
+            if (this.banners.data.length && swiper.activeIndex <= 0) {
+              swiper.activeIndex = this.banners.data.length
+            }
             document.querySelector('.carousel').style.backgroundColor =
-              this.banners.data[swiper.activeIndex].metadata['background-color']
+              this.banners.data[swiper.activeIndex - 1].metadata['background-color']
           }
         }
       }

nuxt.config.js

@@ -74,10 +74,10 @@ module.exports = {
   css: [
     /* {
     src: 'font-awesome/css/font-awesome.css'
-  }, */{src: '~assets/scss/app.scss', lang: 'scss'},
-    {
+  }, */{src: '~assets/scss/app.scss', lang: 'scss'}
+    /* {
       src: 'swiper/dist/css/swiper.css'
-    } /* , {
+    } */ /* , {
       src: 'element-ui/lib/theme-default/index.css'
     } */
   ],