美文网首页移动端及其他
浅谈 Swiper.js : 开源、免费、强大的移动端触摸滑动插

浅谈 Swiper.js : 开源、免费、强大的移动端触摸滑动插

作者: 刘亓明 | 来源:发表于2017-11-28 11:34 被阅读0次

前言

其实这篇文章是我早就拟定想要写出来的,但是因为性子懒,所以就一拖再拖了。
那么简单来讲,这篇文章中我将阐述自己对 Swiper.js 的理解及使用方法。希望能帮助一些人抛开官方复杂的文档实现快速使用这一开源、免费、强大的移动端触摸滑动插件。

什么是 Swiper.js
  • Swiper 常用于移动端网站的内容触摸滑动
  • Swiper 是纯 javascript 打造的滑动特效插件,面向手机、平板电脑等移动终端。
  • Swiper 能实现触屏焦点图、触屏 Tab 切换、触屏多图切换等常用效果。
  • Swiper 开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
Swiper.js 能做什么?
  • Swiper 拥有灵活的 progress ,这是自定义制作 3D 切换效果的利器
    Swiper 制作3D切换效果的方法多种多样。cubecoverflowflip 可以轻松的实现 3D 过渡,如果你想制作其他新颖的切换方式,推荐使用 progress 。progress 可以帮助你获取到滑块的进度索引。

  • 在 Swiper 上加些小动画,制作时下最流行的微展示
    使用 Swiper 再配合一些你喜欢的小动画,你的图片立即变成活灵活现的微场景、微海报。
    CSS3 、TweenMax 、animate.css 都具有轻量或易于使用的特点,或使用官方提供的 Swiper Animate 小插件。
    Swiper Animate 有大量的 demo,下载后进行简单修改即可,是伸手党的最爱。

获取 Swiper.js

官方地址:http://www.swiper.com.cn/
在线演示:http://www.swiper.com.cn/demo/index.html
在线教程(4.0):http://www.swiper.com.cn/usage/swiper4/index.html
API文档(4.0):http://www.swiper.com.cn/api/index2.html

文章正在更新中

相关文章

  • 浅谈 Swiper.js : 开源、免费、强大的移动端触摸滑动插

    前言其实这篇文章是我早就拟定想要写出来的,但是因为性子懒,所以就一拖再拖了。那么简单来讲,这篇文章中我将阐述自己对...

  • VueJS实用组件 —— 移动端网页触摸内容滑动插件

    为了实现移动端的触摸滑动的Banner画廊效果。 组件介绍 强大的官网DEMO DEMO对应的vue源代码 Nic...

  • js-插件/框架

    1.swiper.js Swiper常用于移动端网站的内容触摸滑动 功能: 移动端轮播图 swiper.js...

  • vue疑难杂症

    1.vue实现一个移动端屏蔽滑动的遮罩层元素代码@touchmove.prevent 防止移动端触摸冒泡 遮罩层...

  • 项目中使用vue-awesome-swiper

    一.简介 Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手...

  • PC、手机页面轮播控件Swiper的使用

    Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手机、平板电...

  • swiper

    swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图、触屏整屏滚动等效果。 s...

  • swiper库入门介绍

    swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图、触屏整屏滚动等效果。 s...

  • 手机滑动事件

    移动端,弹出层经常会出现,在弹出层触摸滑动,弹出层下面的body也跟着滑动。 出现这个事情的原因:当我们触摸手机屏...

  • 移动端------移动事件对

    在移动端,用户每时每刻都在触发移动事件,比如触摸的事件,点击,长按,左右滑动的事件,手指缩放,等等。都是移动事件的...

网友评论

    本文标题:浅谈 Swiper.js : 开源、免费、强大的移动端触摸滑动插

    本文链接:https://www.haomeiwen.com/subject/saysbxtx.html