swiper.js 响应式多图轮播特效
时间:2019-09-17
本文章向大家介绍swiper.js 响应式多图轮播特效,主要包括swiper.js 响应式多图轮播特效使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
swiper.js实现响应式的左右切换图片案例展示布局
1、head引入css文件
<link type="text/css" rel="stylesheet" href="css/style.css">
2、head引入js文件
<script type="text/javascript" src="js/swiper.min.js"></script>
3、body引入HTML代码
<div class="banner-box"> <div class="banner-top"></div> <div class="banner-title"> <h1>选择一个漂亮的模板</h1> </div> <div class="banner-text"> <p>别具一格的不仅是风景,更是您的官方网站</p> </div> <div class="banner-top-one"></div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-center none-effect"> <a href="javascript:;"> <img src="images/banner1.jpg" about="" title=""> </a> </div> <div class="swiper-slide"> <a href="javascript:;"> <img src="images/banner2.jpg" about="" title=""> </a> </div> <div class="swiper-slide"> <a href="javascript:;"> <img src="images/banner3.jpg" about="" title=""> </a> </div> <div class="swiper-slide"> <a href="javascript:;"> <img src="images/banner4.jpg" about="" title=""> </a> </div> <div class="swiper-slide"> <a href="javascript:;"> <img src="images/banner5.jpg" about="" title=""> </a> </div> <div class="swiper-slide"> <a href="javascript:;"> <img src="images/banner6.jpg" about="" title=""> </a> </div> </div> <div class="banner-arrow"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="swiper-pagination"></div> </div> <div class="banner-button"> <a href="javascript:;" class="do-btn banner-button-btn"> 更多模板 </a> </div> <script type="text/javascript"> window.onload = function() { var swiper = new Swiper('.swiper-container',{ autoplay: false, //是否自动滚动 speed: 500, //滚动速速 autoplayDisableOnInteraction: true, loop: true, centeredSlides: true, slidesPerView: 3, //当前选中 pagination: '.swiper-pagination', paginationClickable: true, prevButton: '.swiper-button-prev', // 左右切换 nextButton: '.swiper-button-next', // 左右切换 onInit: function(swiper) { swiper.slides[3].className = "swiper-slide swiper-slide-active"; //当前选中 状态 }, breakpoints: { 100: { slidesPerView: 0, } } }); } </script>
更多关于swiper.js特效,请参考:https://www.swiper.com.cn/demo/
原文地址:https://www.cnblogs.com/Better-Me/p/11535628.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何在Linux中修改tomcat端口号
- centos7修改系统语言为简体中文的实现
- Linux 通过Rsync+Inotify实现本、异地远程数据实时同步功能
- linux实现猜数字小游戏源码
- linux编译kernel和svn版本冲突的解决办法
- 在 Ubuntu Linux 上安装 Oracle Java 14的方法
- 在 Linux 系统中手动滚动日志的方法
- Linux进程管理工具supervisor安装配置教程
- Linux执行可执行文件提示No such file or directory的解决方法
- 详解bash中的脚本调试机制
- 在 Linux 上查看和配置密码时效的方法
- CentOS7中使用shell脚本安装python3.8环境(推荐)
- linux定时任务的一些相关操作汇总
- Linux nohup命令原理及实例解析
- 基于centos7快速安装mysql5.7教程解析