文档章节

swiper.com.cn使用方法

h
 hhj187
发布于 2016/09/07 13:17
字数 344
阅读 25
收藏 0

html和css文件都在这了,复制就能用:

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>焦点图swiper</title>
	<link rel="stylesheet" href="swiper/swiper-3.3.1.min.css">
	<link rel="stylesheet" href="轮播图swiper.css">

	<style type="text/css">
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        margin: 0 auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        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;
    }

 .swiper-slide img{
 	width: 100%;
 }
    </style>

</head>
<body>
	<div class="swiper-container"><!--swiper容器[可以随意更改该容器的样式-->  
	    <div class="swiper-wrapper">
	        <div class="swiper-slide"><img src="img/700kh.jpg"></div>
	        <div class="swiper-slide"><img src="img/APICloud_Banner_for_Gizwits.png" ></div>
	        <div class="swiper-slide"><img src="img/banner-1_SJYPmCp.jpg" ></div>
	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination" ></div><!--分页器-->、  	    
	    <!-- 如果需要导航按钮 -->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	</div>
<!-- 导航等组件可以放在container之外 -->


	<script type="text/javascript" src="../ku/jquery-2.2.4.min.js"></script>
	<script src="swiper/swiper-3.3.1.min.js"></script>

	<script>        
  var mySwiper = new Swiper ('.swiper-container', {
     direction:"horizontal",/*横向滑动*/  
     loop:true,/*形成环路(即:可以从最后一张图跳转到第一张图*/  
    
    // 如果需要分页器(小点)
    pagination: '.swiper-pagination',
    paginationClickable: true,
    // paginationBulletRender: function (index, className) {
    //         return '<span class="' + className + '">' + (index + 1) + '</span>';
    //     },

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    autoplay:3000,/*每隔3秒自动播放*/ 
   
  }) 
  mySwiper.startAutoplay();   /*自动播放*/   
 

  </script>

</body>
</html>

演示:http://www.swiper.com.cn/demo/index.html  在新窗口打开-查看源代码

Swiper说明及API手册说明

© 著作权归作者所有

h
粉丝 1
博文 84
码字总数 12457
作品 0
天津
私信 提问
简单的日期时间插件--jquery.jtime

一个jquery显示时间的插件,插件 可以显示任何格式的时间如:yyyy年MM月dd日;HH:mm:ss等等 使用方法简单,只需在页面定义一个class或者id为jtime就可以, 或者是自定义配置.... 使用方法一:<div...

不愿透露姓名的Mr成
2013/01/14
2.2K
1
Adodb.Stream说明手册

组件:"Adodb.Stream" 有下列方法: Cancel 方法   使用方法如下   Object.Cancel   说明:取消执行挂起的异步 Execute 或 Open 方法的调用。 Close 方法   使用方法如下   Object.Clo...

哈狮子
2015/02/07
83
0
c# 获取系统版本,获取net framework 版本(Environment 类)

原文:c# 获取系统版本,获取net framework 版本(Environment 类) 1.获取当前操作系统版本信息 使用Environment.OSVersion 属性 命名空间: System 程序集: mscorlib(在 mscorlib.dll 中)...

杰克.陈
2018/07/21
0
0
hadoop2-shell操作详解

转载之: https://www.cnblogs.com/870386641drh/p/4262593.html FS Shell 调用文件系统(FS)Shell命令应使用 bin/hadoop fs 的形式。 所有的的FS shell命令使用URI路径作为参数。URI格式是s...

断臂人
2018/06/14
0
0
php秒杀、红包、二维码扩展--php秒杀、红包、二维码扩展

php扩展zqf (兼容php7) 全局变量适用于高并发抢购、秒杀,红包生成,数组算法处理等,由于添加了二维码生成功能,安装本扩展之前需要安装libqrencode, 红包生成算法(拼手气红包和普通红包...

qieangel
2015/09/14
3.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
今天
4
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
4
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部