出色的html滑动效果库 swiper -例子1 横向滑动，结束自动切换回第一栏

最新推荐文章于 2024-04-24 15:22:23 发布

Feisy

最新推荐文章于 2024-04-24 15:22:23 发布

阅读量8.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/feisy/article/details/17054261

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

可以用于div滑动，图片滑动等切换

例子代码以及所需资源：http://download.csdn.net/detail/feisy/6638105

官网例子：使用iframe来在同一个页面里面加入了很多各种不同的演示 http://www.idangero.us/sliders/swiper/demos.php

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<style>
/* Demo Syles */
body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.5;
}

.device {
	width: 640px;
	height: 300px;
	padding: 30px 40px;
	border-radius: 20px;
	background: #111;
	border: 3px solid white;
	margin: 5px auto;
	position: relative;
	box-shadow: 0px 0px 5px #000;
}

.device .arrow-left {
	background: url(img/arrows.png) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -15px;
	width: 17px;
	height: 30px;
}

.device .arrow-right {
	background: url(img/arrows.png) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -15px;
	width: 17px;
	height: 30px;
}

.swiper-container {
	height: 300px;
	width: 640px;
}

.content-slide {
	padding: 20px;
	color: #fff;
}

.title {
	font-size: 25px;
	margin-bottom: 10px;
}

.pagination {
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 5px;
	width: 100%;
}

.swiper-pagination-switch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #999;
	box-shadow: 0px 1px 2px #555 inset;
	margin: 0 3px;
	cursor: pointer;
}

.swiper-active-switch {
	background: #fff;
}
</style>
</head>
<body>
	<div class="device">
		<a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/slider1-1.png">
				</div>
				<div class="swiper-slide">
					<img src="img/slider1-2.png">
				</div>
				<div class="swiper-slide">
					<div class="content-slide">
						<p class="title">Slide with HTML</p>
						<p>You can put any HTML inside of slide with any layout, not
							only images, even another Swiper!</p>
					</div>
				</div>
			</div>
		</div>
		<div class="pagination"></div>
	</div>
	<script src="js/jquery-1.10.1.min.js"></script>
	<script src="js/idangerous.swiper-2.1.min.js"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container', {
			pagination : '.pagination',
			loop : true,
			grabCursor : true,
			paginationClickable : true
		})
		$('.arrow-left').on('click', function(e) {
			e.preventDefault()
			mySwiper.swipePrev()
		})
		$('.arrow-right').on('click', function(e) {
			e.preventDefault()
			mySwiper.swipeNext()
		})
	</script>
</body>
</html>

Feisy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
出色的html滑动效果库 swiper -例子1 横向滑动，结束自动切换回第一栏

http://download.csdn.net/detail/feisy/6637871官网例子：http://www.idangero.us/sliders/swiper/demos.php
复制链接

扫一扫