兼容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
兼容pc端和移动端的轮播图插件 swiper.js的更多相关文章
- 移动端web轮播图插件swiper,功能很强大
使用方法示例: <div class="swiper-container"> <div class="swiper-wrapper"> ...
- 轮播图插件swiper 的使用
引入文件(注:目前版本号为Swiper3.x) <link rel="stylesheet" type="text/css" href="//s ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
- vue轮播图插件之vue-awesome-swiper
移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- thinkPHP模型before_insert新增前 before_update更新前 before_write写入前 区别
thinkPHP模型中有个save方法,可用于新增数据和修改数据,这里容易出现混淆. 经过调试: before_write,不管是插入新数据还是修改数据都会执行: before_insert,只有插入 ...
- 15、R语言聚类树的绘图原理
聚类广泛用于数据分析.去年研究了一下R语言聚类树的绘图原理.以芯片分析为例,我们来给一些样品做聚类分析.聚类的方法有很多种,我们选择Pearson距离.ward方法. 选择的样品有: "GS ...
- [Nest] 05.nest之数据库
数据库 Nest 与数据库无关,允许您轻松地与任何 SQL 或 NoSQL 数据库集成.根据您的偏好,您有许多可用的选项.一般来说,将 Nest 连接到数据库只需为数据库加载一个适当的 Node.js ...
- C++ 标准库字符串类使用
标准库中的字符串类 C++语言直接支持C语言所有概念. C++中没有原生的字符串类型. 由于C++中没有原生的字符串类型,C++标准库提供了string类型. 1.string 直接支持字符串链接 2 ...
- 将Abp的UnitTest中的InMemory改为SQLite in memory
添加nuget包 Microsoft.EntityFrameworkCore.Sqlite 添加ServiceCollectionRegistrarSqlite public static class ...
- Jquery table相关--工时系统
1.jquery 的弹出对话框,单击事件之后 if (confirm("确定要删除?")) { // //点击确定后操作 } 2.对某个table中的checkbox是否被选中的遍 ...
- C# 实体之间转换
记录一下方便自己下次使用 public class ConvertHelper { public static List<T2> ConvertToList<T1, T2>(L ...
- scala新版本学习(3)
1.REPL:读取->求值->打印->循环.Scala程序将输入的内容快速的编译成为字节码,然后字节码文件交给Java虚拟机进行执行. 2.val是值不可变,var值可变.在变量声明 ...
- js css3 固定点拖拽旋转
一.直接上效果图: 然后是代码: 一共两种实现方式: <!DOCTYPE html> <html lang="en"> <head> <m ...
- 【lucene】一个简单的招聘网站的建立
1.建立索引库: 核心代码如下 package com.tabchanj.job.index; import java.util.ArrayList; import java.util.HashMap ...