vue和 swiper 组合轮播图

小半 • 2023年2月11日上午9:34 • 技术随笔 • 阅读 243

刚开始以为只是像之前的html+js 的时候整合就可以了，添加对应代码后发现无法运行
上网查找了vue 和swiper 的整合，最开始发现 vue-swiper ，安装后各种报错（因为版本问题），卸载！
安装vue-aswsome-swiper，依然各种报错（技术有限）
在vue.js 的官网查了一下插件库，发现比较多人用还是vue-aswsome-swiper

然后教程有了
https://awesomejs.dev/for/vue/pkg/258193116060713482/

npm install swiper vue-awesome-swiper --save  
//需要下载两个库，你可以当做，swiper 其实只是调用它的css，vue-awesome-swiper才是本体

下载后可以发现版本是这样的：

"swiper": "^5.4.5",
"vue": "^2.5.2",
"vue-awesome-swiper": "^4.1.1",
"vue-router": "^3.0.1",
"vuex": "^3.6.2"

根据文档提示，属于旧版本，应该这样写

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

.....
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

vue

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>
        <div class="slide-image" style="background-image: url(https://picsum.photos/1300/600?random=01)"></div>
    </swiper-slide>
    <swiper-slide>
        <div class="slide-image" style="background-image: url(https://picsum.photos/1300/600?random=02)"></div>
    </swiper-slide>
    <swiper-slide>
        <div class="slide-image" style="background-image: url(https://picsum.photos/1300/600?random=03)"></div>
    </swiper-slide>
    <swiper-slide>
        <div class="slide-image" style="background-image: url(https://picsum.photos/1300/600?random=04)"></div>
    </swiper-slide>
    <swiper-slide>
        <div class="slide-image" style="background-image: url(https://picsum.photos/1300/600?random=05)"></div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>


<script>
  export default {
    name: 'banner',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          effect : 'fade',
          autoplay:true
          //可以设置各种属性，参考地址:https://www.swiper.com.cn/api/thumbs/2018/0915/431.html
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(0, 1000, false)
      //0:指定将要切换到的slide的索引
      //1000：切换速度(单位ms)
      //false:设置为false时不会触发transition回调函数
    }
  }
</script>

<style  scoped>
    .slide-image{
        height: 660px;
        background-position: center;
        background-size: cover;
    }
</style>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/97988.html

vue和 swiper 组合 轮播图

相关推荐

分享到:

vue和 swiper 组合轮播图