Vue框架里使用Swiper的方法示例
程序员文章站
2024-01-23 16:52:04
下载swiper
首先使用npm 或者cnpm下载swiper
cnpm install swiper
引入swiper
im...
下载swiper
首先使用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>
解释一下:autoplay:true这样可以解决不自动轮播问题。如果想设置滚动的时间,用speed设置相应时间即可。direction可以设置轮播的方向。具体的参数可参考swiper的官网地址:http://www.swiper.com.cn/api/effects/2015/0308/193.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 官宣!天津麒麟、中标软件整合实质完成:中国操作系统新旗舰扬帆起航
下一篇: 还是不行大神们,救救我吧