您的位置：首页 > Web前端 > JavaScript

swiper.js

2016-07-13 19:22 477 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="utf-8"
/>
<title></title>
<link
rel="stylesheet"
type="text/css" href="css/swiper.min.css"
/>
<style
type="text/css">
body{
background-color: paleturquoise;
overflow:
hidden;
}
.swiper-container
{
width:
800px;
margin-top:
100px;
}
.swiper-slide{
text-align: center;
line-height:
600px;
font-size:
50px;
border:
1px solid deeppink;
box-shadow:
5px 5px mediumspringgreen;
background-color: yellow;
}
</style>
</head>

<body>
<div
class="swiper-container">
<div
class="swiper-wrapper">
<div
class="swiper-slide"
style="height:
600px;">Slide 1</div>
<div
class="swiper-slide"
style="height:
600px;margin-left:
50px;">Slide 2</div>
<div
class="swiper-slide"
style="height:
600px;margin-left:
50px;">Slide 3</div>
</div>
</div>
<script
src="js/swiper.min.js"
type="text/javascript" charset="utf-8"></script>
<script>
var
mySwiper = new Swiper('.swiper-container', {
speed:2000,
initialSlide:0,// 第一张在最前面
keyboardControl:true,//键盘可以控制
grabCursor:true,
// 用小手抓
autoplay:1000,
autoplayDisableOnInteraction
: true,
})
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： swiper

相关文章推荐

新的分享

章节导航