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

Swiper使用方法(向前和向后按钮在swiper-container外面)的更多相关文章

  1. 普通选项卡+自动播放功能+向前/向后按钮 原生js

    今天做了幻灯片,主要功能包括:普通选项卡,向前/向后播放按钮,向前?向后播放功能,自动播放功能 要实现简单选项卡功能是没有问题的,但是添加功能就出现各种各样的问题了 遇到的问题:1 下标问题 2普通选 ...

  2. Swiper使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  3. 解决pycharm新建项目后按钮灰色问题

    解决pycharm新建项目后按钮灰色问题 出现过多次该问题了, 在此记录一下 同样适用于导入别人的新项目后无法运行问题 原因一: pycharm没有设置系统解析器 解决方法一: 打开pycharm-& ...

  4. js中表单提交后按钮变灰色的功能

    表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm

  5. Java 中 List 向前和向后遍历

    Java 中 List 向前和向后遍历 import java.util.*; public class TestCollectionIterator { public static void mai ...

  6. C# WebAPI中DateTime类型字段在使用微软自带的方法转json格式后默认含T的解决办法

    原文:C# WebAPI中DateTime类型字段在使用微软自带的方法转json格式后默认含T的解决办法 本人新手,在.Net中写WebAPI的时候,当接口返回的json数据含有日期时间类型的字段时, ...

  7. form单提交后按钮变成失效变灰

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. protobuf 向前兼容向后兼容

    http://blog.163.com/jiang_tao_2010/blog/static/12112689020114305013458/ 不错的protobuf.. protobuf的编码方式: ...

  9. angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic

    首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet&q ...

随机推荐

  1. 第五章 二叉树(e5)重构

  2. 几个小模板:topology, dijkstra, spfa, floyd, kruskal, prim

    1.topology: #include <fstream> #include <iostream> #include <algorithm> #include & ...

  3. Monkey原理初步和改良优化--Android自动化测试学习历程

    章节:自动化基础篇——Monkey原理初步和改良优化(第三讲) 主要讲解内容与笔记: 一.理论知识: 直接看文档,来了解monkey的概念.基本原理,以及如何使用. First,what is And ...

  4. 【校招面试 之 C/C++】第1题 为什么优先使用构造函数的初始化列表

    1.首先看一个例子: #include<iostream> using namespace std; class Test1 { public: Test1() // 无参构造函数 { c ...

  5. .net调用web邮箱发送邮件(转载)

    public static void SendEmail() { System.Net.Mail.SmtpClient client = new System.Net.Mail.SmtpClient( ...

  6. SQL2000清除SQL日志

    1.打开查询分析器,输入命令DUMP TRANSACTION 数据库名 WITH NO_LOG2.再打开企业管理器--右键你要压缩的数据库--所有任务--收缩数据库--收缩文件--选择日志文件--在收 ...

  7. c语言定义函数指针和typedef简写

    二种方法来定义函数指针 #include<stdio.h> #include<stdlib.h> #include<Windows.h> int add(int a ...

  8. CentOS 安装 Xamarin官方Mono

    预先准备: 服务器可连入互联网 有yum 工具(没什么好说的,如果这个你没装,那重新装个系统吧,debian 等不要看这个,不一样的) wget 工具(可选) yum-uitl 工具包 导入Xamar ...

  9. DLL另類劫持注入法

    // Win32Project2.cpp : 定义 DLL 应用程序的导出函数. // //////////////////////////////////////////////////////// ...

  10. js记录

    --获取后缀名,结果 .jpg var extName = "/upload/head_img/20150902102539.jpg";var ta = extName.subst ...