Swiper轮播插件使用
前文
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
归根到此，Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！
官方API文档：https://www.swiper.com.cn/api/index.html
官方资源下载：https://www.swiper.com.cn/download/index.html
引入资源
<link href="dist/css/swiper.min.css" rel="stylesheet"> <!-- 注意，必须强制添加rel节点，不然不能正常使用 -->
<script src="dist/js/swiper.min.js"></script>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="dis/css/swiper.min.css" rel="stylesheet"> <!---->
<style>
/* 设置轮播组件的高宽 */
.swiper-container {
width:1500px;
height: 420px;
}
</style> </head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="data:images/one.png"></div>
<div class="swiper-slide"><img src="data:images/two.png"></div>
<div class="swiper-slide"><img src="data:images/three.png"></div>
<div class="swiper-slide"><img src="data:images/four.png"></div>
<div class="swiper-slide"><img src="data:images/five.png"></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>
<script src="dis/js/swiper.min.js"></script>
<script src="dis/js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 水平切换选项,
loop: true, // 循环模式选项 // 如果需要分页器
pagination: {
el: '.swiper-pagination',
}, // 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}, // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
//自动播放
autoplay: {
autoplay:true,//自动播放
delay:3000, //自动切换的时间间隔，单位ms
disableOnInteraction :false //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
},
on:{
autoplayStart:function(){
console.log('开启自动切换');
},
autoplayStop:function(){
console.log('关闭自动切换');
}
}
})
})
</script>
</body>
</html>
效果
Swiper轮播插件使用的更多相关文章
- 使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- Swiper 轮播插件 之 动态加载无法滑动
1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...
- 使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题
因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
- 【swiper轮播插件】解决swiper轮播插件触控屏问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中添加swiper轮播插件
网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-s ...
- swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
随机推荐
- MySQL菜鸟入门“秘籍”
一.MySQL简介 1.什么是数据库 ? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不 ...
- Linux命令——gzip、zcat、bzip2、bzcat、tar
参考:Linux命令——ar 为什么文件要压缩? 当文件过大时,无论是本地做备份,复制都很麻烦,而且还浪费磁盘空间.如果用网络传输,大文件无疑会浪费大量宝贵带宽.文件压缩技术可以有效解决这个问题,但是 ...
- Linux网络管理——路由配置文件、DNS配置文件、hosts文件
路由配置文件 route命令添加的路由表,重启网络服务或者重启系统之后就全都失效了.可以创建针对网卡的路由配置文件,这样在重启网络服务 或者 重启系统的时候就会加载针对某个网卡的配置文件. CONFI ...
- Netty搭建服务端的简单应用
Netty简介 Netty是由JBOSS提供的一个java开源框架,现为 Github上的独立项目.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客 ...
- python 2.7安装pygame报错解决办法pygame-1.9.4-cp27-cp27m-win_amd64.whl is not a supported wheel on this platform.
python下载python安装包 https://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame 下载完后进入cmd命令行执行安装,报错: pygame-1.9 ...
- 大数据之路week04--day05（java XML解析）
java解析XML的四种方式: XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性.给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析方式都是一样的,只不过实现的语法不 ...
- mysql数据库高并发处理
总体思想:短, 少, 分流 短: 1.页面静态化, 2.使用缓存 3.使用存储过程, 对于处理一次请求需要多次访问数据库的操作, 将操作整合到存储过程, 这样只需要一次数据库访问 4.延迟修改, 将修 ...
- 部署kibana节点
部署Kibana节点 1.查看系统环境: [root@Kibana ~]# hostname Kibana [root@Kibana ~]# cat /etc/redhat-release CentO ...
- appium+python 【Mac】UI自动化测试封装框架介绍 <四>---脚本的调试
优秀的脚本调试定位问题具备的特点: 1.方便调试. 2.运行报错后容易定位出现的问题. 3.日志的记录清晰 4.日志可被存储,一般测试结果的分析在测试之后会进行,那么日志的存储将会为后期的分析问题带来 ...
- Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...