vue-awesome-swiper 轮播图插件

发布时间:2018-12-09 编辑:小张个人博客 查看次数:5392

关于Swiper

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动 web apps,native apps 和 hybrid apps。主要是为 IOS 而设计的,同时,在 Android、WP8 系统也有着良好的用户体验,Swiper从3.0开始不再全面支持 PC 端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。

Swiper javascript滑动特效插件

Swiper4 API 文档:https://www.swiper.com.cn/api/index.html

git :https://github.com/surmon-china/vue-awesome-swiper

基于 Swiper4、适用于 Vue 的轮播组件,支持服务端渲染和单页应用。

Swiper 4 的特色功能

1、不依赖框架

Swiper无需加载任何公共库(如 jquery)即可运行,这保证了 Swiper 的轻量和运行速度。Swiper 也可以在加载了公共库的环境下安全的运行,如 jQuery, Zepto, jQuery Mobile 等。

2、1:1的触摸滑动

Swiper 默认的触摸比例为 1 : 1,你可以通过修改 Swiper 的设置来改变这个比例。

3、监视器

Swiper 可以通过设置开启监视器,有了这个功能 Swiper 可以在你动态改变 Dom 或 Swiper 的样式时自动重新初始化并计算所需的元素。

4、丰富的API

Swiper 拥有丰富的API,允许你建立自己独特的分页器、导航、视差滚动、或其他精彩的效果。

5、真正支持RTL布局

Swiper 是唯一一个支持 100%RTL 布局的滑动插件。可在 swiper-container 上加 dir="rtl"。

6、多行slides布局

Swiper 允许多行 Slides 布局,这样每行的 slide 就会较少。

7、过渡效果

增加了三种新的过渡效果:淡入、3D方块、3D流

8、双向控制

现在Swiper可以用来控制其他的 Swiper,甚至可以同时控制。

9完整的导航控制

Swiper 配备了常用的导航控制器,包括分页器,切换箭头,滚动条。

10、Flexbox布局

Swiper 使用流行的 flexbox 布局,这样就解决了很多计算尺寸方面的问题。这种布局也允许用 CSS 来设定 Slides。

12、Flexbox网格

你可以在 Swiper 初始化的时候设定 slide 的显示,包括每行、每列、每组数量以及他们的间距等。

13、视差过渡

Swiper支持流行的视差效果,你可以将视差效果应用于Swiper的内部元素,如图片、文本、标题、背景图等等..

14、图片懒加载

Swiper 对非 active slide 内的图片实行延迟加载,这个功能加快了页面的打开速度,提高了 Swiper 的使用体验。

15、虚拟 Slides

Swiper 4 新增了虚拟 slides 特性,当你有很多Slide或有很多内容的 slide 的时候可以在 DOM 中只保留需要的 slide。

其他的特性

Swiper4 还包含了所有 swiper2 的优秀特性,包括自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper

vue-awesome-swiper 安装

CDN

<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>

NPM

npm install vue-awesome-swiper --save

main.js 文件里添加如下代码

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { 默认参数(可选) } */)

模板文件

<template>
<div class="swiper">
    <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for ="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl" />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
</div>
</template>
export default {
    name: 'HomeSwiper',
    data: function () {
        return {
            swiperOption: {
                pagination: '.swiper-pagination',
                loop: true,  // 开启无限循环
		 //设置自动播放速度
               autoplay: 3000
            },
            swiperList: [{
                id: '1',
                imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg'
            },{
                id: '2',
                imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/c6/2467595fffc3b302.jpg_750x200_cca13d51.jpg'
            },{
                id: '3',
                imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/86/deb33800de224c02.jpg_750x200_74fb795e.jpg'
            }]
        }
    }
}
.swiper >>>.swiper-pagination-bullet-active
    background: #fff

Swiper 完全免费并开源(MIT Licensed),无论你使用在个人网站或商业网站,都无需付费。

Swiper 常用于移动端网站的内容触摸滑动,Swiper 是纯 javascript 打造的滑动特效插件,面向手机、平板电脑等移动终端,以及 PC 端网站。Swiper 能实现触屏焦点图、触屏 Tab 切换、触屏多图切换等常用效果。



出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号