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 响应式多图轮播特效的更多相关文章

  1. cssSlidy.js 响应式手机图片轮播

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...

  2. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  3. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. 关于Layui 响应式移动端轮播图的问题

    用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...

  6. 使用bootstrap建立响应式网页——通栏轮播图(carousel)

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  7. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  8. Bootstrap3的响应式缩略图幻灯轮播效果设计

    在线演示1 本地下载 HTML <div class="container">  <div class="col-md-12">  &l ...

  9. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

随机推荐

  1. 56-python基础-python3-集合-新建集合

    集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键. 集合支持用in和not in操作符检查成员. 由len()内建函数得到集合的基数(大小). 用 for 循环迭代集合的成员. 但是因为集 ...

  2. poj2385 Apple Catching (线性dp)

    题目传送门 Apple Catching Apple Catching Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 154 ...

  3. TCL自动化之SSH交互式

    目前ssh工具很多,但是能够轻松运用到自动化脚本中,可以轻松适配任何环境,满足ssh交互式登录的tcl工具包很少 下面是个人在tcl自动化过程中比较满意的一款自动化脚本 通过使用管道方式分装plink ...

  4. Mysql命令收集【重要】

    1.在linux上获取Mysql服务器状态,及版本: [root@host]# mysqladmin --version 结果信息: mysqladmin  Ver 8.42 Distrib 5.7. ...

  5. console.log的高级用法

    //基本用法 console.log('最常见用法\n换行'); console.error('输出错误信息 会以红色显示'); console.warn('打印警告信息 会以黄色显示'); cons ...

  6. Codeforces 735E 树形DP

    题意:给你一棵树,你需要在这棵树上选择一些点染成黑色,要求染色之后树中任意节点到离它最近的黑色节点的距离不超过m,问满足这种条件的染色方案有多少种? 思路:设dp[x][i]为以x为根的子树中,离x点 ...

  7. java this的应用

    package java04; /* * 当方法的局部变量和类的成员变量重名时,会根据“就近原则”,优先使用局部变量. * 如果需要访问奔雷中的成员变量,需要使用格式: this.成员变量名 * * ...

  8. java23种设计模式(三)-- 适配器模式

    一.适配器模式 转载:https://www.cnblogs.com/V1haoge/p/6479118.html 适配器就是一种适配中间件,它存在于不匹配的二者之间,用于连接二者,将不匹配变得匹配, ...

  9. Python3.5-20190526-廖老师-自我笔记-单元测试-参数换-paramunittest

    参数化: import timeimport list1 #想测试list1中的求和函数是否正确fun1import paramunittestimport unittest #先设置参数组@para ...

  10. Python lambda 多变量

    >> x = list(map(lambda x, y: (x>3, y>0), (1,2,3,4,5), (0,1,2,3,4)))>>> x[(False ...