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 ...
随机推荐
- 第五章 二叉树(e5)重构
- 几个小模板:topology, dijkstra, spfa, floyd, kruskal, prim
1.topology: #include <fstream> #include <iostream> #include <algorithm> #include & ...
- Monkey原理初步和改良优化--Android自动化测试学习历程
章节:自动化基础篇——Monkey原理初步和改良优化(第三讲) 主要讲解内容与笔记: 一.理论知识: 直接看文档,来了解monkey的概念.基本原理,以及如何使用. First,what is And ...
- 【校招面试 之 C/C++】第1题 为什么优先使用构造函数的初始化列表
1.首先看一个例子: #include<iostream> using namespace std; class Test1 { public: Test1() // 无参构造函数 { c ...
- .net调用web邮箱发送邮件(转载)
public static void SendEmail() { System.Net.Mail.SmtpClient client = new System.Net.Mail.SmtpClient( ...
- SQL2000清除SQL日志
1.打开查询分析器,输入命令DUMP TRANSACTION 数据库名 WITH NO_LOG2.再打开企业管理器--右键你要压缩的数据库--所有任务--收缩数据库--收缩文件--选择日志文件--在收 ...
- c语言定义函数指针和typedef简写
二种方法来定义函数指针 #include<stdio.h> #include<stdlib.h> #include<Windows.h> int add(int a ...
- CentOS 安装 Xamarin官方Mono
预先准备: 服务器可连入互联网 有yum 工具(没什么好说的,如果这个你没装,那重新装个系统吧,debian 等不要看这个,不一样的) wget 工具(可选) yum-uitl 工具包 导入Xamar ...
- DLL另類劫持注入法
// Win32Project2.cpp : 定义 DLL 应用程序的导出函数. // //////////////////////////////////////////////////////// ...
- js记录
--获取后缀名,结果 .jpg var extName = "/upload/head_img/20150902102539.jpg";var ta = extName.subst ...