add swiper.vue

package-lock.json

@@ -4013,6 +4013,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
+      "integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
+      "requires": {
+        "ssr-window": "^1.0.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -8022,8 +8030,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -10491,6 +10498,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -10824,6 +10836,16 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.0.3.tgz",
+      "integrity": "sha512-I0Af9Zl1PgJmRVFZMwI1AfIJL1qx4oVtOWIrh/wNCRSr63DjD3YO8s0V/HvW0O3ds9jx2LNtTRuiHiRdALLhTg==",
+      "dev": true,
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "table": {
       "version": "4.0.2",
       "resolved": "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz",
@@ -11488,6 +11510,26 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "swiper": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+          "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+          "requires": {
+            "dom7": "^2.1.3",
+            "ssr-window": "^1.0.1"
+          }
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -16,6 +16,7 @@
     "popper.js": "^1.15.0",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.0.3"
   },
   "devDependencies": {
@@ -30,6 +31,7 @@
     "sass-loader": "^8.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "swiper": "^5.0.3",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.39.3",
     "webpack-dev-middleware": "^3.7.1",

src/components/swiperr.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" v-for="(item,index) in message" :key="index"><img :src="item" alt=""></div>
+    </div>
+    <div class="swiper-button-next"><img src="..\assets\back2.png" alt=""/></div>
+    <div class="swiper-button-prev"><img src="..\assets\back1.png" alt=""/></div>
+  </div>
+</template>
+
+<script>
+ /* eslint-disable */ 
+import '../assets/swiper.js'
+
+export default {
+name: 'Swiperr',
+ props: ['message'],
+   data () {
+    return {
+       msg: 'Welcome to Your Vue.js App'
+    }
+},
+mounted(){
+     var swiper = new Swiper('.swiper-container', {
+     slidesPerView: 1,
+      spaceBetween: 30,
+      loop: true,
+      spaceBetween: 30,
+      centeredSlides: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    }
+    ); 
+}
+}
+</script>
+
+<style lang="stylus">
+@import '../assets/swiper.min.css';
+
+    .swiper-button-next:after, .swiper-button-prev:after {
+        font-family: swiper-icons;
+        font-size: var(--swiper-navigation-size);
+        display none
+    }
+    .swiper-wrapper img{
+      width 100%
+      height 100%
+    }
+    .swiper-button-next{
+      right 6.9%
+    }
+    .swiper-button-prev{
+      left 6.9%
+    }
+    .swiper-button-next img{
+      width 32px
+      height 32px
+    }
+     .swiper-button-prev img{
+      width 32px
+      height 32px
+    }
+    html, body {
+      position: relative;
+      height: 100%;
+    }
+    body {
+      background: #eee;
+      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      color:#000;
+      margin: 0;
+      padding: 0;
+    }
+    .swiper-container {
+      width: 100%;
+      height: 100%;
+    }
+    .swiper-slide {
+      text-align: center;
+      font-size: 18px;
+      background: #fff;
+
+      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;
+    }
+</style>

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <carousel></carousel>
+    <!-- <carousel></carousel> -->
     <!-- <div id="banner">
       <div id="u1" data-label="公司简介轮播图">
         <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
@@ -26,6 +26,7 @@
         </div>
       </div>
     </div>-->
+  <swiperr  :message="message"></swiperr>
 
     <div id="sale">
       <p class="saletitle">致力于互联网创新技术服务</p>
@@ -552,6 +553,9 @@ div#box3-Right ul :nth-child(2) {
   width: 280px;
   height: 296px;
 }
+#banner{
+  background-color: goldenrod
+}
 .slideshow {
   width: 100%;
 }
@@ -587,6 +591,7 @@ import img3 from "../assets/banner3.png";
 import HelloWorld from "@/components/HelloWorld.vue";
 import HomeFooter from "../components/footer.vue";
 import Carousel from "@/components/carousel.vue";
+import Swiperr from "@/components/swiperr.vue"
 
 import animated from "animate.css";
 
@@ -594,13 +599,15 @@ export default {
   name: "home",
   components: {
     HomeFooter,
-    Carousel
+    Carousel,
+    Swiperr
   },
   data() {
     return {
       timer: null, //定时器
       mark: 0, //比对图片索引的变量
       //轮播图数据
+      message:[img1, img2, img3],
       imgArray: [img1, img2, img3],
       saleArray: [
         {