兼容pc端和移动端的轮播图插件 swiper.js

swiper.js是一款纯JavaScript打造的滑动特效插件，可以用来实现检点轮播图，tab触摸滑动切换等常用效果。下载地址：https://www.swiper.com.cn/download/index.html#file1

swiper.js提供给我们很多种不同的demo效果，我们可以根据自己的需求来选择自己需要。所有demo的HTML部分，CSS几乎是一样的,不一样的是调用的js方法，或配置的参数不同来达到不同的效果。

使用方法

首先我们引入 swiper.min.css和 swiper.min.js

HTML部分

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div>
</div>

CSS部分所有的demo是一样的

  .swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}

js部分可以根据自己下载的demo不同来选取自己需要的demo下的js部分代码

例如：

 var swiper = new Swiper('.swiper-container', {slidesPerView: 3,spaceBetween: 30,slidesPerGroup: 3,loop: true,pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});

你可以把swiper-slide里面Slide 1替换成自己的图片，这样这个效果就完成的了。

其中里面的参数

slidesPerView：显示几张图片

spaceBetween：图片之间的间距

slidesPerGroup：定义slides的数量多少为一组，在旋转模式下有效。其实就是滑动的时候一下滑动几张图片了。

loop：图片是否循环播放

上面这个轮播图是不会自己播放的，要自己播放，得自己手动添加autoplay:true及自动播放

更多参数设置请参考官网 https://www.swiper.com.cn/api/autoplay/112.html 或 http://www.xiaoshu168.com/jquery/103.html

转载于:https://www.cnblogs.com/zimengxiyu/p/9800774.html

兼容pc端和移动端的轮播图插件 swiper.js相关推荐

html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
轮播图插件--swiper
轮播图插件swiper下载方式输入网址:https://www.swiper.com.cn/ 进入官网,点击 "获取Swiper" >点击 "下载Swiper&q ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
vue2使用轮播图插件swiper，vue-awesome-swiper
欢迎使用插件:swiper,vue-awesome-swiper 注释vue2使用方式: 1: npm install swiper vue-awesome-swiper -–save 2: npm ...
轮播图插件Swiper的使用（懒加载+异步加载数据）
效果 HTML 引入swiper-bundle.css.swiper-bundle.js <head><link rel="stylesheet" href=&q ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
轮播图插件（swiper）
今天给新手介绍一个轮播图插件--swiper 首先要引用swiper.min.css和swiper.min.js. 页面代码 <div class="swiper-container& ...
html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
jSlider是一款兼容IE8的高级jQuery轮播图插件.jSlider轮播图插件的特点是轻量级,使用简单,跨平台.通过jSlider你可以非常容易的而在网页中实现任何轮播图效果.它的特点还有: 速 ...

兼容pc端和移动端的轮播图插件 swiper.js

兼容pc端和移动端的轮播图插件 swiper.js相关推荐

最新文章

热门文章