jQuery自适应轮播图插件Swiper用法示例
作者：onestopweb 发布时间：2024-04-19 10:18:38
标签：jQuery,轮播图,插件
本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考，具体如下：
运行效果截图如下：
示例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5自适应模板</title>
<link rel="stylesheet" href="swiper-3.3.1.min.css">
<style>
html, body {
position: relative;
height: 100％;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100％;
height: 100％;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
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;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/banner01.jpg"></div>
<div class="swiper-slide"><img src="images/banner02.jpg"></div>
<div class="swiper-slide"><img src="images/banner03.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script src="swiper-3.3.1.jquery.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
</script>
</body>
</html>
关于swiper的内容读者可参考相关网站：http://www.swiper.com.cn/download/index.html
希望本文所述对大家jQuery程序设计有所帮助。
0
投稿猜你喜欢
- 本文实例为大家分享了python读取图片并修改文件大小的具体代码，供大家参考，具体内容如下# Author:NDK# -*- coding:
最近有一个需求要把dataframe转换为多维矩阵，然后可以使用values来实现，下面记录一下代码，方便以后使用。import panda- 介绍在本文中，云朵君将和大家一起了解装饰器的工作原理，如何将我们之前定义的定时器类 Timer 扩展为装饰器，以及如何简化计时功能。最后对
- 如下所示：一. visualize.pyfrom graphviz import Digraphimport torchfrom torch
- 手写Vue服务端渲染概念：放在浏览器进行就是浏览器渲染,放在服务器进行就是服务器渲染。客户端渲染不利于 SEO 搜索引擎优化服务端渲染是可以
- 最近有同学询问如何利用Python处理xml文件，特此整理一个比较简洁的操作手册，供大家参阅。首先准备一个xml文件，xml中的内容如下所示
- 本文实例讲述了Python使用scrapy采集数据时为每个请求随机分配user-agent的方法。分享给大家供大家参考。具体分析如下：通过这
- 最近的一些疫情信息很让人揪心，为了方便大家掌握疫情信息，在空闲之余做了一个关于 nCoV 的疫情监控小助手。主要的功能是通过企业微信的 We
- 我就废话不多说了，直接上代码吧！from PIL import Image# 通道转换def change_image_channels(i
- udf_WeekDayName 代码如下:CREATE FUNCTION [dbo].[udf_WeekDayName] ( ) RETUR
- 如何做一个文本书写器？我们有下面的的函数，可做“文本书写器”：<％function WriteToFile(FileName
- 下边我就简单说一下过程和原理。第一步：实现一个匿名函数并能自己执行。（function(){ }）() 这个函数在一样编的好的J
- Python版本是2.7.9，在win8上测试成功，就是抓取有点慢，本来想用多线程的，有事就罢了。模板之家的网站上的url参数与页数不匹配，
- asp时间加减运算 和转换问题 a=2007-07-24 2:23:15 b=2005-06-25 2:23:15 问题1 如何将a转换成2
- 如果你对在Python生成随机数与random模块中最常用的几个函数的关系与不懂之处，下面的文章就是对Python生成随机数与random模
- SQL触发器实例1 定义： 何为触发器？在SQL Server里面也就是对某一个表的一定的操作，触发某种条件，从而执行的一段程序。触发器是一
- 隐藏你的.php文件 隐藏你的.php文件 今天做PHP在线手册镜像的时候看到了这个方法,哈哈,以前都没有注意到,所以说,手册是
- 在Python中将字符串转换为集合使用 set() 类将字符串转换为集合，例如 my_set = set(my_str)。 set() 类将
- 一、写在前面我从未想过自己会写python系列的自动化文章，有些同学会问，那你现在为什么又开始写了？不止一个人找过我，问我可以写一些Pyth
- 前言在可视化图形中，很多的节点和连线都有某一个特征或者属于某些分类，为了在使用可视化图形的时候更加直观的看出相同类型节点的集合，我们就会用到
