エラー解決と Vue スワイパー カルーセルの使用

1.スワイパープラグインをダウンロードする

質問 1: いくつかの古いチュートリアルによると、vur-awesome-swiper のみがインストールされています。

この状況は間違いなく利用できません。最初に npm install swiper --s を実行する必要があります。

npm install swiper --s

質問 2: スワイパーの導入時に CSS が導入されなかった

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

通常、これはこの方法で書かれたパスです。ノードモジュールで自分で見つけることができます。グローバルまたはローカルにインポートできます。私はローカルにインポートしました。

スワイパーのバージョンが高い場合、main.js で 6.0 以降の古いインポート方法は使用できません。

import "swiper/swiper-bundle.css";

質問 3: プロセス中にさまざまなエラー レポートが表示されることがありますが、要約すると、問題のほとんどはバージョンの不一致です。

npm install [email protected] --save

さらに main.js は以下をインポートします。

//新版本

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)


//旧版本
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(vueSwiper)

2、スワイパーの使用

 スワイパーコンポーネント内:

<template>
  <div class="swiper-main">
    <swiper :options="swiperOption">
      <div class="swiper-button-prev" slot="button-prev"></div>
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item.imgUrl" alt="" />
      </swiper-slide>

      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="swiper-pagination"></div>
  </div>
</template>

簡単な実験用にいくつかの画像データを書き留め、カルーセルの速度、小さなドットの下のページ数、左右のページめくりなど、スワイパーで使用される関連パラメーターをいくつか設定しました。

<script>
// import 'swiper/swiper-bundle.css'
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperList: [
        {
          id: 1,
          imgUrl: "/images/swiper1.png",
        },
        {
          id: 2,
          imgUrl: "/images/swiper2.png",
        },
        {
          id: 3,
          imgUrl: "/images/swiper3.png",
        },
        {
          id: 4,
          imgUrl: "/images/swiper1.png",
        },
        {
          id: 5,
          imgUrl: "/images/swiper2.png",
        },
        {
          id: 6,
          imgUrl: "/images/swiper3.png",
        },
      ],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: 3000,
        speed: 1000,
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

特定のスタイルについては、自分で調整するだけでよく、検査ツールを使用してそのクラス名を確認し、必要に応じて変更します。