首页 > 其他 > 详细

记录一下swiper插件在vue2.x的使用……

时间:2021-04-30 20:54:29      阅读:47      评论:0      收藏:0      [点我收藏+]

大致的需求是:一个大轮播图,旁边是小的轮播图跟随大轮播图进行轮播,边框可以有颜色。

技术分享图片

 

来些实际的:

swiper版本:"swiper": "^6.3.5",
插件: "vue-awesome-swiper": "^4.1.1",
官网:  https://github.com/surmon-china/vue-awesome-swiper
按照官网进行安装
main.js:
    import VueAwesomeSwiper from ‘vue-awesome-swiper‘
import ‘swiper/swiper-bundle.css‘

Vue.use(VueAwesomeSwiper)

使用插件的页面:
import { Swiper, SwiperSlide} from "vue-awesome-swiper";
//使用swiper6 需要引入要使用的插件,autoplay自动播放,不好使,就是因为没有
引入, import Swiper2,{Autoplay } from ‘swiper‘。
import Swiper2, { Navigation, Pagination, EffectFade, Autoplay } from ‘swiper‘
Swiper2.use([Navigation, Pagination, EffectFade, Autoplay])
 data() {
    return {
      swiperOptions: {
        pagination: {
            //分页器
          el: ".swiper-pagination",
          clickable :true,
          renderBullet: this.renderBullet//自定义分页器功能,在methods里使用了
          //方法
        },
        observer: true, //修改swiper自己或子元素时,自动初始化swiper
        observeParents: true, //修改swiper的父元素时,自动初始化swiper
        slidesPerView: 1,
        autoplay: {
       delay: 3000,
        disableOnInteraction: false
      },
        loop:true,
      },
      }
      methods:{
          renderBullet(index,className){
              var text=this.t1arr[index].picUrl
              return ‘<div class="‘ + className + ‘">‘ + ‘<img class="picImg" src="‘ + text + ‘">‘ + ‘</div>‘;
       },
      }
      

技术分享图片

 

记录一下swiper插件在vue2.x的使用……

原文:https://www.cnblogs.com/mm-zz/p/14723061.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!