代码示例:

<html>
<head>
<link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" type="text/css" />
</head>
<body> <!--轮播111-->
<div style="height:100px" class="swiper-container banner1">
<div class="swiper-wrapper"> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="淘宝" /></a></div> </div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div> <br>
<br>
<br> <!--轮播222-->
<div style="height:100px" class="swiper-container banner2">
<div class="swiper-wrapper"> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> </div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div> <br>
<br>
<br> <!--轮播333-->
<div style="height: 120px" class="swiper-container banner3">
<div class="swiper-wrapper"> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> </div>
<!-- 分页器 -->
<div class="swiper-pagination"></div> </div> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js" type="text/javascript"></script>
<script> /*轮播111*/
var mySwiper = new Swiper('.banner1', {
autoplay: true,//可选选项,自动滑动
pagination: {
el: '.swiper-pagination',
},
}) /*轮播222*/
var mySwiper = new Swiper('.banner2', {
// autoplay: true,//可选选项,自动滑动
pagination: {
el: '.swiper-pagination',
},
}) /*轮播333*/
var mySwiper = new Swiper('.banner3', {
// autoplay: true,//可选选项,自动滑动
pagination: {
el: '.swiper-pagination',
},
}) </script> </body>
</html>

  

swiper,一个页面使用多个轮播的更多相关文章

  1. 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

    Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...

  2. vue项目一个页面使用多个轮播图详解

    1.html代码: <div v-for="(item,index) in arrDataList.Floor"> // 根据后台数据循环渲染多个轮播图组件 <d ...

  3. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  4. Vue与swiper想结合封装全屏轮播插件

    项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...

  5. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  6. 【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)

    首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...

  7. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  8. 01.轮播图之五 :一个 imageView也能 作 轮播

    这个是最近才写的,本以为实现起来很有难度,需要更高深的理论, 写完之后,才发现自己错误的离谱: 之所以能用一个imageview 实现轮播 基于两点::: 使用 imageview 的layer 层设 ...

  9. 一百二十六:CMS系统之轮播图管理页面布局和添加轮播图的模态对话框制作

    视图 @bp.route('/banners/')@login_required@permission_required(CMSPersmission.POSTER)def banners(): re ...

随机推荐

  1. HTML5 超链接:a标签的href 属性

    H5中a标签的 href 属性用于指定超链接目标的 URL,这里主要给大家介绍一下 href 属性的定义和用法以及应用实例. 定义和用法: <a> 标签的 href 属性用于指定超链接目标 ...

  2. CountDownLatch两种用法

    1.当前线程等待其他线程执行完毕后在执行. 2.模拟高并发场景. 在多线程编程里,CountDownLatch是一个很好的计数器工具. 常用的两个方法: 1.计数器减一 public void cou ...

  3. 移动端使用mint-ui loadmore实现下拉刷新上拉显示更多

    前序:在使用vue做一个h5项目的时候,需要上拉分页加载,实践中总结一下: 首先要安装mint-ui npm i mint-ui -S 然后引入,一般在main.js里面 import Vue fro ...

  4. py目录

    Python开发[第二篇]:初识Python Python开发[第三篇]:Python基本数据类型 Python开发[第四篇]:Python基础之函数   &&[4.1]算法递归 冒泡 ...

  5. python常用库,包网址

    常用包下载:https://pypi.org/ 1.NumPy: https://www.numpy.org/ 2.pandas: http://pandas.pydata.org/ 3.SciPy: ...

  6. PHP/TP5 接口设计中异常处理

    PHP提供 Exception 类来处理异常 new Exception('错误信息(默认为空)','错误代码(默认0)','异常链中前一个异常') 然后可以通过 e -> getMessage ...

  7. Mybatis运行错误:信息: SQLErrorCodes loaded: [DB2, Derby, H2, HDB, HSQL, Informix, MS-SQL, MySQL, Oracle, PostgreSQL, Sybase]

    Mybatis运行出现错误提示: 五月 23, 2018 12:07:22 上午 org.springframework.jdbc.support.SQLErrorCodesFactory <i ...

  8. Activity中满屏和去标题的实现方法

    两种方式: 在xml文件中进行配置 在项目的清单文件AndroidManifest.xml中,找到需要全屏或设置成无标题栏的Activity,在该Activity进行如下配置即可. 实现全屏效果: a ...

  9. JUC详解

    一.Java多线程 -- JUC包源码分析1 -- CAS/乐观锁 乐观锁其实就是不加锁,用CAS + 循环重试,实现多个线程/多个客户端,并发修改数据的问题 使用AtomicStampedRefer ...

  10. 使用jQuery+huandlebars防止编码注入攻击

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...