Swiper使用方法(向前和向后按钮在swiper-container外面)
<!-- 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>
.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使用方法(向前和向后按钮在swiper-container外面)的更多相关文章
- 普通选项卡+自动播放功能+向前/向后按钮 原生js
今天做了幻灯片,主要功能包括:普通选项卡,向前/向后播放按钮,向前?向后播放功能,自动播放功能 要实现简单选项卡功能是没有问题的,但是添加功能就出现各种各样的问题了 遇到的问题:1 下标问题 2普通选 ...
- Swiper使用方法
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- 解决pycharm新建项目后按钮灰色问题
解决pycharm新建项目后按钮灰色问题 出现过多次该问题了, 在此记录一下 同样适用于导入别人的新项目后无法运行问题 原因一: pycharm没有设置系统解析器 解决方法一: 打开pycharm-& ...
- js中表单提交后按钮变灰色的功能
表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm
- Java 中 List 向前和向后遍历
Java 中 List 向前和向后遍历 import java.util.*; public class TestCollectionIterator { public static void mai ...
- C# WebAPI中DateTime类型字段在使用微软自带的方法转json格式后默认含T的解决办法
原文:C# WebAPI中DateTime类型字段在使用微软自带的方法转json格式后默认含T的解决办法 本人新手,在.Net中写WebAPI的时候,当接口返回的json数据含有日期时间类型的字段时, ...
- form单提交后按钮变成失效变灰
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- protobuf 向前兼容向后兼容
http://blog.163.com/jiang_tao_2010/blog/static/12112689020114305013458/ 不错的protobuf.. protobuf的编码方式: ...
- angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic
首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet&q ...
随机推荐
- express.Router
[express.Router] 1.可使用 express.Router 类创建模块化.可挂载的路由句柄.Router 实例是一个完整的中间件和路由系统,因此常称其为一个 “mini-app”. 下 ...
- hibernate经常报的几个不起眼的错误, 都是因为不细心或者手滑了输入有误造成了
最近会经常用到hibernate了, 也经常报错, 看着屏幕上一根大红条是非常不爽的, 这几天集合了一下经常报的错误, 整合一下放到这里, 以后再出现这个错误直接去解决就好了 1, org.hiber ...
- clipboard.js复制文字
A-固定内容: <script type="text/javascript" src="script/clipboard.min.js"></ ...
- 自对齐(self-aligned)
C语言是自对齐的,32位以4字节对齐,64位以8字节对齐(1字节=8 bits) 自对齐的好处:在一条指令内完成数据的取或者存的操作,使得内存访问更快:否则,如果一个变量跨机器字存储,那么要做两次或更 ...
- 虚拟机安装Centos6.5服务器系统
前言: 工作需要,研究Linux数日,写下此教程,意在给其他初学者参考学习,亦是给自己留作备用.好记性不如烂笔头,毕竟只是偶尔使用,留下教程,以备不时之需. 对于学习研究Linux的新手,个人推荐VM ...
- pyhon之函数参数
#函数的参数分为形参和实参,其中形参就是形式参数,是在创建函数的时候定义,实参就是实际参数,是在调用的函数的时候创建,这个并不是重点,具体#的参数内部,我们可以把参数分为以下4种# 1.普通参数# 2 ...
- discuz回贴通知插件实现-插件后台管理配置
1.登出discuz后台,再次设计插件 2.使用变量
- IIS支持IPA、APK文件的下载
IIS里MIME类型中默认是没有ipa,apk文件的,所以无法直接通过网络下载. 解决方法如下: 1.打开IIS信息服务管理器,选中自已的网站,在右边面板中找到MIME类型. 2.双击打开,点击右 ...
- ajax原理以及优缺点(转)
1.ajax技术的背景不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的 ...
- c3p0数据源配置
Xml代码 <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: --> ...