这篇文章给大家介绍Swiper怎么在Vue中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
首先使用npm 或者cnpm下载swiper
cnpm install swiper
引入swiper
import Swiper from ‘swiper'; import ‘swiper/dist/css/swiper.min.css';
使用swiper
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="../../static/images/ad1.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../../static/images/ad2.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../../static/images/ad3.jpg" alt=""> </div> </div> </div>
mounted里面调用
mounted(){ var mySwiper = new Swiper('.swiper-container', { autoplay:true, loop:true }) },
注意
如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面,否则不会出来数据。
slider组件的内容如下:
<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide v-for="(picitem,index) in items" :key="index"> <img :src="picitem.src" alt=""> </swiper-slide> </swiper> </template> <script type="text/ecmascript-6"> 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 } } </script> <style lang="stylus" rel="sheetstylus"> </style>
关于Swiper怎么在Vue中使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
本文题目:Swiper怎么在Vue中使用-创新互联
新闻来源:https://www.cdcxhl.com/article38/cssopp.html
成都网站建设公司_创新互联,为您提供网站导航、网页设计公司、云服务器、外贸建站、网站设计、定制开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联