轮播组件vue

最新推荐文章于 2024-08-24 09:06:00 发布

晴天Smile

最新推荐文章于 2024-08-24 09:06:00 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/liang377122210/article/details/73251487

版权

vue 专栏收录该内容

30 篇文章 4 订阅

订阅专栏

< swiper : options= "swiperOption" class= 'swiper-box' >

< swiper-slide v-for= "v in swipers" >< img : src= "v.fdcImage" class= "swiper-img"

style= "width:100%;height:1.8rem" ></ swiper-slide >

< div class= "swiper-pagination" slot= "pagination" ></ div >

</swiper>

安装

npm install vue-awesome-swiper --save

首先在main.js引入

 
  import  
  VueSwiper  
  from  
  'vue-awesome-swiper' 
 

 
  Vue. 
  use( 
  VueSwiper) 
 

   然后就可以用了： 
 

 
     mounted () { 
    
     setTimeout(()  
     => { 
    
     this. 
     asyncCount =  
     5 
    
                  },  
     1000) 
    
              }, 
    
       data () { 
      
       return { 
      
       swiperOption: { 
      
       autoplay:  
       3000, 
      
       pagination:  
       '.swiper-pagination', 
      
       autoplayDisableOnInteraction:  
       false, 
      
       loop:  
       true 
      
                        }, 
      
                     swipers:[] 
      
            } 
      
                },