nuxt使用swiper

最新推荐文章于 2024-05-16 10:17:05 发布

久爱@勿忘

最新推荐文章于 2024-05-16 10:17:05 发布

阅读量1.8k

点赞数 3

文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/love_weiai/article/details/119952735

版权

一、安装vue-awesome-swiper

npm install vue-awesome-swiper --save

二、安装swiper

npm install swiper --save

三、在pligins目录下创建vue-swiper.js文件

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

四、修改nuxt.config.js文件

css下加

  css: [
    'swiper/dist/css/swiper.css'
  ],

pulgins下加

  plugins: [
    {src: "@/plugins/vue-swiper", ssr: false}
  ],

五、出现

 Can't resolve 'swiper' in 'D:\item\闵行消防\minhang_firecontrol_website\node_modules\vue-awesome-swiper\dist'

解决方法：

修改swiper版本为

"swiper": "^3.1.3",

六、页面使用

<div v-swiper:mySwiper="swiperOption">
     <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in special" :key="index">
          <img :src="item.picUrl" alt="缩略图" style="height: 100%" @click="send(item)">
        </div>
     </div>
   <div class="swiper-pagination"></div>
</div>

data(){
    return{
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop: true,
          autoplay: false,
          slidesPerView : 4,
        }
    }
}