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. IEnumerable和IEnumerator 详解 分类: C# 2014-12-05 11:47 18人阅读 评论(0) 收藏

    原:<div class="article_title"> <span class="ico ico_type_Original">&l ...

  2. Linux笔记2-常用命令

    1.简单的命令 cd /    切到根路径 cd ..    回到上一级目录 pwd    显示当前路径 touch newFile    创建文件 mkdir xx    创建目录 mv file1 ...

  3. C#使用Process启动exe程序,不弹出控制台窗口的方法

    背景:使用wkhtmltopdf工具将html转换成pdf时,这个工具在进行转换时会弹出命令行窗口显示转换过程,但是在项目运行时弹出服务器突然弹出控制台窗口会很奇怪,尤其是当转换多个时.解决这个问题 ...

  4. TensorFlow学习——入门篇

    本文主要通过一个简单的 Demo 介绍 TensorFlow 初级 API 的使用方法,因为自己也是初学者,因此本文的目的主要是引导刚接触 TensorFlow 或者 机器学习的同学,能够从第一步开始 ...

  5. UIWindow与UIView

    UIView与UIWindow * 一般应用程序只有一个UIWindow对象.所有的控件都是在UIWindow上展现的.每个UIView对象都有一个window属性,表示当前view显示在哪个窗体上. ...

  6. [置顶]unity常用开发套件

    维京人骨骼动画制作(Unity 2D Animation资源包使用指南) 维京人骨骼动画制作2(Unity 2D IK资源包使用指南) -------------------------------- ...

  7. categorical_crossentropy VS. sparse_categorical_crossentropy

    From:https://jovianlin.io/cat-crossentropy-vs-sparse-cat-crossentropy/ categorical_crossentropy 和 sp ...

  8. activemq---点对点/发布订阅模式简单代码示例

    activemq 消息模式流程: ConnnectionFactory --> Connection --> Session --> Message ---ConnectionFac ...

  9. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. 牛客网NOIP赛前集训营-提高组(第七场)A-中国式家长 2

    题目描述 有一天,牛牛找到了一个叫<中国式家长>的游戏,游戏中需要靠"挖脑洞"来提升悟性. 挖脑洞在一个\(N\)行\(M\)列的地图上进行,一开始牛牛有\(K\)点行 ...