Swiper怎么在Vue中使用-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Swiper怎么在Vue中使用-创新互联

这篇文章给大家介绍Swiper怎么在Vue中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

目前成都创新互联已为1000多家的企业提供了网站建设、域名、网络空间、网站运营、企业网站设计、桥东网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

首先使用npm 或者cnpm下载swiper 

cnpm install swiper

引入swiper

import Swiper from ‘swiper'; 
import ‘swiper/dist/css/swiper.min.css';

使用swiper


  
   
    
   
            
            
    

mounted里面调用

  mounted(){
    var mySwiper = new Swiper('.swiper-container', {
     autoplay:true,
     loop:true
    })
   },

注意

如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面,否则不会出来数据。

slider组件的内容如下:



 import {swiper, swiperSlider} from 'vue-awesome-swiper'

 export default {
  data() {
   return {
    swiperOption: {
     notNextTick: true,
     loop: true,
     autoplay: true,
     speed: 1000,
     direction: 'horizontal',
     grabCursor: true,
     setWrapperSize: true,
     autoHeight: true,
     pagination: '.swiper-pagination',
     paginationClickable: true,
     mousewheelControl: true,
     observeParents: true,
     debugger: true
    },
    items: [
     {src: 'http://localhost/static/images/1.jpg'},
     {src: 'http://localhost/static/images/2.jpg'},
     {src: 'http://localhost/static/images/3.jpg'},
     {src: 'http://localhost/static/images/4.jpg'},
     {src: 'http://localhost/static/images/5.jpg'}
    ],
   }
  },
  components: {
   swiper,
   swiperSlider
  }
 }



关于Swiper怎么在Vue中使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享名称:Swiper怎么在Vue中使用-创新互联
分享链接:http://kswsj.cn/article/cssopp.html

其他资讯