swiper(移动端触摸滑动插件)
tip:自己敲得Swiper 的小demo，可以复制粘贴看看效果哦。
swiper的js包css包下链接地址 : https://github.com/Clearlovesky/swiper3.4.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/swiper.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;
/* 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-pagination{
top: 0;
height: 3rem;
width: 100%;
background-color: #386bdb;
text-align: left;
}
.swiper-pagination-bullet{
width: 12%;
height: 3rem;
text-align: center;
border-radius: 0;
font-size: 1rem;
line-height: 3rem;
color: #fff;
opacity: 0.6;
background-color: transparent;
}
.swiper-pagination-bullet-active{
opacity: 1;
}
.swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/
content:"热门";/*所插入的内容*/
}
.swiper-pagination-bullet:nth-child(2):before{
content:"关注";
}
.swiper-pagination-bullet:nth-child(3):before{
content:"话题";
}
.swiper-pagination-bullet:nth-child(4):before{
content:"问答";
}
/*第一个swiper里的小swiper*/
.swiper-container-h {
width: 100%;
height: 19.0rem;
margin-top:3.5rem;
background-color: pink;
overflow: hidden;
}
.swiper-container-h>.swiper-wrapper{
margin: 30px 15px;
height: 15.0rem;
}
.swiper-container-h>.swiper-wrapper>.swiper-slide{
background-color: #ccc;
height: 15rem;
line-height: 15rem;
} /*第二屏*/
.one{
height: 100%;
width: 100%;
/*background-color: #ccc;*/
margin-top: 3.5rem;
line-height: 10rem;
}
.one1,.one2,.one3{
height: 10rem;
width: 100%;
background-color: pink;
margin-top: .1em;
line-height: 10rem;
}
/*第三屏*/
.two{
height: 100%;
width: 100%;
background-color: pink;
margin-top: 3.5rem;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 热门 第一屏start -->
<div class="swiper-slide">
<div class="swiper-container-h"> <div class="swiper-wrapper">
<div class="swiper-slide">雄</div>
<div class="swiper-slide">的</div>
<div class="swiper-slide">传</div>
<div class="swiper-slide">说</div>
</div>
</div>
</div>
<!-- 热门 第一屏end -->
<div class="swiper-slide">
<div class="one">
<div class="one1">1111</div>
<div class="one2">2222</div>
<div class="one3">3333</div>
</div>
</div>
<div class="swiper-slide">
<div class="two">4444</div>
</div>
<div class="swiper-slide">问答</div>
</div>
<!-- tab栏的头部导航按钮 -->
<div class="swiper-pagination">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
</div>
<script src="js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
// spaceBetween: 50
});
var swiperH = new Swiper('.swiper-container-h', {
// pagination: '.swiper-pagination',
slidesPerView: 1.6,//屏幕显示小div的个数
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
</script>
</body>
</html>