NuxtJS中使用vue-awesome-swiper

vue-awesome-swiper在Nuxt使用

1.安装

npm install -S swiper vue-awesome-swiper

我安装的swiper版本： 6.7.5

我安装的 vue-awesome-swiper版本： 4.1.1

2.在项目 plugins 下创建swiper.js文件

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'
// 在6.0以上版本，分页器、前进后退按钮需单独引入才能使用

import swiper, { Navigation, Pagination } from 'swiper'

swiper.use([Navigation, Pagination])

export default () => {

    Vue.use(VueAwesomeSwiper)

}

3. 在nuxt.config.js 文件中配置

···
css: [
    'swiper/swiper-bundle.min.css',
  ],
···
plugins: [
    { src: "~/plugins/swiper.js", ssr: false },
  ],

4.具体使用

//  .vue文件中
<template>
    <div v-swiper:mySwiper="swiperOption" class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in dataImage" :key="index+1" class="swiper-slide banner">
          <img :src="item.imgUrl" alt="" />
        </div>
      </div>
      <div class="swiper-pagination my-pagination"></div>
      <div class="swiper-button-prev my-btn"></div>
      <div class="swiper-button-next my-btn"></div>
    </div>
</template>
<script>

export default {
  data(){
    return {
    // 具体配置可查看官网
      swiperOption: {
        loop : true,
        centeredSlides : true,
        centeredSlidesBounds: true,
        slidesPerView : 'auto',
        spaceBetween: 30,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        setWrapperSize :true,
        grabCursor : true,
      },
      dataImage: [
        {
          // 图片路径
          imgUrl: require("./images/banner/banner2.png")
        },
        {
          imgUrl: require("./images/banner/banner3.png")
        },
        {
          imgUrl: require("./images/banner/banner4.png")
        },
        {
          imgUrl: require("./images/banner/banner5.png")
        },
      ]
    }
  }
}
</script>
// 可参考样式
<style lang="scss">
.swiper-container {
    height: 652px;
    --swiper-pagination-color: #000;
    --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
    --swiper-navigation-size: 60px;
    .my-btn {
      width: 90px;
      height: 90px;
      background-color: #000;
    }
    .swiper-slide {
      width: 1046px;
      img {
        width: 100%;
        object-fit: cover;
      }
    }
  }
.my-pagination .swiper-pagination-bullet {
  width: 18px;
  height: 18px;
}
</style>

5.具体效果