Swiper使用方法(向前和向后按钮在swiper-container外面)
2024-09-24 19:59:27
Swiper插件的使用
1、HTML
<!-- Swiper -->
<section class="swipper">
<div class="swiper-button-next"></div>
<div class="nav-swipper swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide"><span class="now"><b><img src="data:images/swiper-1.png" height="25" width="auto" alt=""></b>股票</span></div>
<div class="swiper-slide"><span><b><img src="data:images/swiper-2.png" height="25" width="auto" alt=""></b>债券</span></div>
<div class="swiper-slide"><span><b><img src="data:images/swiper-3.png" height="25" width="auto" alt=""></b>公益</span></div>
<div class="swiper-slide"><span><b><img src="data:images/swiper-4.png" height="25" width="auto" alt=""></b>实物</span></div>
<div class="swiper-slide"><span><b>你猜</b>测试</span></div>
<div class="swiper-slide"><span><b>再猜</b>测试</span></div>
</div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div> -->
</div>
<div class="swiper-button-prev"></div>
<!-- Swiper End-->
</section>
2、CSS
.nav-swipper{background: #F2F2F2;height: 78px;box-sizing: border-box;}
/*.nav-swipper .swiper-wrapper{margin: 0px 24px;}*/
.nav-swipper .swiper-slide {margin: 0px;text-align: center; font-size: 13px;color: #999; background: #F2F2F2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
section.swipper {border-top: 1px solid #979797;padding: 0px 24px;position: relative;}
section.swipper .swiper-button-prev{top:50%;background-image:url(../images/swiper-pre.png);background-size: 12px auto;left: 10px;right: auto;width: 12px;height: 19px;}
section.swipper .swiper-button-next{top:50%;background-image:url(../images/swiper-next.png);background-size: 12px auto;left: auto;right: 10px;width: 12px;height: 19px;}
.nav-swipper span { display: inline-block; vertical-align: top;height: 64px; }
.nav-swipper b { height: 42px; display: table-cell; vertical-align: middle; width: 42px; text-align: center; background: #F7F7F7; border-radius: 50%; border: #fff 1px solid; color: #ccc; box-shadow: 0px 1px 3px #999; }
.nav-swipper span.now b{border-color: #FF6602;}
3、JS
var swiper = new Swiper('.nav-swipper', {
pagination: '.swiper-pagination',
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 0,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
“swiper-button-next”和“swiper-button-prev”两个button是可以脱离在“swiper-container”外面的。因为“swiper-container”的Margin-left起作用,但是Margin-right不起作用(设置了over-flow:hidden),所以没有办法设置“swiper-container”的外边距。但是可以在“swiper-container”外面加一个容器,然后设置它的padding,再把“向左、向右的按钮”放在padding的间距里面。padding 要使用px,rem有时候不起作用。
swiper使用的一般方法如链接所示:http://www.swiper.com.cn/usage/index.html
最新文章
- 阿里巴巴Json工具-Fastjson讲解
- 总结Allegro元件封装(焊盘)制作方法[修整]
- Fragment怎么实现TabHost
- Oracle 中记录用户登录信息
- Xcode中Info.plist文件各个键的作用说明【搜藏】
- JAXB - Annotations, Annotations for Enums: XmlEnum, XmlEnumValue
- Android 中Webview 自适应屏幕
- 【Spring MVC系列】--(5)理解AOP
- virtual host
- [每日一题] 11gOCP 1z0-052 :2013-09-5 runInstaller oracle of no swap
- 查看linux 服务器还剩多少空间
- C#如何调用C++的dll
- Redis自学笔记:3.3入门-散列类型
- Hbase多版本的读写(Shell&;Java API版)
- RLE Plots: relative log expression
- git设置远程同步分支
- iOS app bundle id
- Testlink定位实例
- 57. Insert Interval (Array; Sort)
- PHP程序员未来路在何方