2. vue-awesome-swiperを使用して、Vueプロジェクトにホームページカルーセルを実装します

Githubドキュメント： https ： //github.com/surmon-china/vue-awesome-swiper
公式ドキュメント：https： //www.swiper.com.cn/

CodeCloudにブランチを作成する

次に、コマンドラインgit pullを入力git checkout index-swipperし、ブランチでカルーセルダイアグラム機能を開発します。

コマンドラインnpm run devからプロジェクトを開始します。

Swiperプラグインをインストールする

Cmdターミナル、ルートディレクトリに入り、学習ビデオをスワイプします。vue-awesome-swiperはバージョン2.6.7を使用します。ここに最新バージョンをインストールしました。または、より安定しているバージョン2.6.7をインストールできます。

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

main.jsでの使用と使用：

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

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

Vue.use(VueAwesomeSwiper)

注意引用的CSS的路径、ブロガーにはバグがあります。最初はSwiperがインストールされておらず、vue-awesome-swiperのみがインストールされています。これらの両方をインストールして注意する必要があります。！！！cssによって導入されたパス！！！

公式サイトは最新版です。2.6.7バージョンはインポート 'swiper / dist / css /swiper.css'である必要があります

新しいSwiper.vueコンポーネント

<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>

Home.vueにSwiperコンポーネントをインポートします

コードクラウドマージブランチにプッシュ

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