2. Use vue-awesome-swiper in the Vue project to implement the homepage carousel diagram

Article Directory

Github document: https://github.com/surmon-china/vue-awesome-swiper
official document: https://www.swiper.com.cn/

Create a branch on Code Cloud

Insert picture description here
Then enter the command line git pulland git checkout index-swipperdevelop the carousel diagram function on the branch.

npm run devStart the project from the command line .

Install Swiper plugin

Cmd terminal, enter the root directory, swipe in the learning video, vue-awesome-swiper uses version 2.6.7, I installed the latest version here, or you can install version 2.6.7, it should be more stable.

npm install swiper vue-awesome-swiper --save
or
npm install swiper [email protected] --save

Use and use in main.js:

Insert picture description here

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

注意引用的CSS的路径, The blogger has a bug here. Swiper was not installed at the beginning, only vue-awesome-swiper was installed. Both of these need to be installed, and pay attention! ! ! ! The path introduced by css! ! !

The official website is the latest version. The 2.6.7 version should be import'swiper/dist/css/swiper.css'
Insert picture description here

New Swiper.vue component

<template>
  <!-- 在swiper外面加上一层div，是为了防止在网速慢的情况下抖动的bug，用户体验不好 -->
  <div class="warpper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <!-- 用于分页 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
     
     
  name: 'HomeSwiper',
  // ES6 data后面要有空格
  data () {
     
     
    return {
     
     
      swiperOption: {
     
     
        // 参数选项,显示小点
        pagination: '.swiper-pagination',
        // 循环轮播
        loop: true,
        // 每张播放时长1秒，自动播放
        autoplay: 1000,
        // 滑动速度
        speed: 500
      },
      swiperList: [
        {
     
     
          id: '0001',
          imgUrl:
            'http://img1.qunarzz.com/piao/fusion/1802/e3/62ce7362ca051d02.jpg_640x200_6db551b7.jpg'
        },
        {
     
     
          id: '0002',
          imgUrl:
            'http://img1.qunarzz.com/piao/fusion/1801/93/ce59d182aca07102.jpg_640x200_ba03d44c.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式进行了穿透  只要warpper下出现swiper-pagination-bullet-active类名就变色
// 这样就不受scoped作用域的限制
.warpper >>> .swiper-pagination-bullet-active {
     
     
  background-color: #fff !important;
}
.warpper {
     
     
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 31.25%;
  background: #eee;

  .swiper-img {
     
     
    width: 100%;
  }
}
</style>

Import the Swiper component in Home.vue

Insert picture description here

Push to code cloud merge branch

git add -A
git commit -m'change'
git push
git checkout master
git merge origin/index-swiper
git push