swiper,一个页面使用多个轮播
代码示例：
<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,一个页面使用多个轮播的更多相关文章
- 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题
Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...
- vue项目一个页面使用多个轮播图详解
1.html代码: <div v-for="(item,index) in arrDataList.Floor"> // 根据后台数据循环渲染多个轮播图组件 <d ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
- Vue与swiper想结合封装全屏轮播插件
项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...
- 小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
- 【VIP视频网站项目一】搭建视频网站的前台页面（导航栏+轮播图+电影列表+底部友情链接）
首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
- 01.轮播图之五 ：一个 imageView也能 作 轮播
这个是最近才写的,本以为实现起来很有难度,需要更高深的理论, 写完之后,才发现自己错误的离谱: 之所以能用一个imageview 实现轮播 基于两点::: 使用 imageview 的layer 层设 ...
- 一百二十六：CMS系统之轮播图管理页面布局和添加轮播图的模态对话框制作
视图 @bp.route('/banners/')@login_required@permission_required(CMSPersmission.POSTER)def banners(): re ...
随机推荐
- 关于性能（SEO）
性能优化有很多方面:细节决定成败,系统慢是由一个又一个的小细节造成的,所以开发初期做好充足的准备,开发中认真负责,不偷工减料,维护期更注重代码质量,这样才会让我妈的系统稳定高效. 1.0 使用CDN( ...
- [Oracle,2018-02-07] Oracle 报错：“ORA-02292：违反完整约束条件（XXX.FKXXX）
报错的原因很清楚,就是你要删除的记录是另外某条记录的外键,解决办法: 1.删除子记录,在删除本记录: 2.暂时禁用此外键(适合在测试后清除所有记录的情况,记得最后要恢复此外键) 解决办法有了,现在最主 ...
- android 开发 View _10_ Path之基本操作
转载地址:http://www.gcssloop.com/customview/Path_Basic/ 安卓自定义View进阶-Path之基本操作 在上一篇Canvas之图片文字中我们了解了如何使用C ...
- Android单元测试学习（一）
什么是单元测试 首先总结一下什么是单元测试,单元测试中的单元在Android或Java中可以理解为某个类中的某一个方法,因此单元测试就是针对Android或Java中某个类中的某一个方法中的逻辑代码进 ...
- Adjacent Bit Counts（01组合数）
Adjacent Bit Counts 4557 Adjacent Bit CountsFor a string of n bits x 1 , x 2 , x 3 ,..., x n , the a ...
- week07 13.2 NewsPipeline之 二 News Fetcher - Xpath
我们使用Xpath来专门做一个scrapter 我们专门弄个文件夹 里面全部是 各个新闻源(CNN BBC等)的scraper来抓取网站的text内容 主要函数(就是传入text内容的那个url)然后 ...
- java正则表达式 需要转义的字符
特别字符 说明 $ 匹配输入字符串的结尾位置.如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 ‘\n' 或‘\r'.要匹配 $ 字符本身,请使用 \$. ( ) 标记一个子 ...
- actuator/hystrix.stream 没有反应的方法
http://localhost:8086/actuator/hystrix.stream 在启动类加上,就ok了 @Bean public ServletRegistrationBean hystr ...
- Django_Form验证(一)
Django为我们提供了一个模板来做Form验证,不需要我们再去写复杂的验证代码了 简单的提交信息html页面: <form action="/fff/Form" metho ...
- VS2015秘钥
Visual Studio Professional 2015简体中文版(专业版)KEY:HMGNV-WCYXV-X7G9W-YCX63-B98R2Visual Studio Enterprise 2 ...