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="data:images/banner1.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner2.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner3.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner4.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner5.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data: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/
swiper.js 响应式多图轮播特效的更多相关文章
- cssSlidy.js 响应式手机图片轮播
cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...
- 基于jQuery游戏网站焦点图轮播特效
基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <cente ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 关于Layui 响应式移动端轮播图的问题
用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...
- 使用bootstrap建立响应式网页——通栏轮播图(carousel)
1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
- Unslider – 轻量的响应式 jQuery 内容轮播插件
Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...
- Bootstrap3的响应式缩略图幻灯轮播效果设计
在线演示1 本地下载 HTML <div class="container"> <div class="col-md-12"> &l ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
随机推荐
- docker ssh连接不上
docker ssh连接报下面的错 Last login: Thu Apr 13 09:17:23 2017 from localhost Connection to 127.0.0.1 closed ...
- k3 cloud中出现合计和汇总以后没有显示出来,合价要新增一行以后才出现值
解决办法:找到对应字段,把及时触发值更新事件打上勾
- RabbitMQ ——与Spring集成及exchange的direct、topic方式实现和简单队列实现
程序整体结构 Maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...
- 浏览器报406 错误:The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers
The resource identified by this request is only capable of generating responses with characteristics ...
- 2018-2-13-win10-UWP-RSS阅读器
title author date CreateTime categories win10 UWP RSS阅读器 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 1 ...
- Oracle:同步两张表的相同字段
有一个需求需要同步两张表的相同字段,比如表A和表B,这两张表是不同的用户下的表,表结构是一样的. 一开始我简单写了一个sql语句,如下: update ord_log1 A set (A.pid, A ...
- MySQL06-- mysql索引
目录 一.索引介绍 1.什么是索引 2.索引类型介绍 3.索引管理 5.索引操作 6.前缀索引 7.联合索引 8.创建索引总结: 一.索引介绍 1.什么是索引 1)索引就好比一本书的目录,它能让你更快 ...
- Codeforces 735E 树形DP
题意:给你一棵树,你需要在这棵树上选择一些点染成黑色,要求染色之后树中任意节点到离它最近的黑色节点的距离不超过m,问满足这种条件的染色方案有多少种? 思路:设dp[x][i]为以x为根的子树中,离x点 ...
- [IOI1998]Polygon(区间dp)
[IOI1998]Polygon 题意翻译 多边形是一个玩家在一个有n个顶点的多边形上的游戏,如图所示,其中n=4.每个顶点用整数标记,每个边用符号+(加)或符号*(乘积)标记. 第一步,删除其中一条 ...
- mysql 联合表查询从表即使有索引依然ALL的一个原因
那就是主表和从表的关联字段的编码方式不一样!!! 晕啊,折腾了半天才发现,可能是不知道啥时候mysql更改主体编码方式了,结果导致后来新建的表的关联字段和之前的主表的字段的编码方式不一样 改成一样的编 ...