极客观点
项目管理
HarmonyOS
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper-3.4.1.min.css">
<!-- Demo styles -->
<style>
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.wrapper1 .swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.wrapper2 .swiper-slide {
height: 300px;
}
</style></head>
<body>
<!-- Swiper -->
<div class="wrapper1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/bg-img.png)">1</div>
<div class="swiper-slide" style="background-image:url(img/bg-img.png)">2</div>
<div class="swiper-slide" style="background-image:url(img/bg-img.png)">3</div>
</div>
</div>
</div>
<div class="wrapper2">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/bg-img.png)">1</div>
<div class="swiper-slide" style="background-image:url(img/bg-img.png)">2</div>
<div class="swiper-slide" style="background-image:url(img/bg-img.png)">3</div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="js/zepto.min.js"></script>
<script src="js/swiper-3.4.1.jquery.min.js"></script>
<!-- Initialize Swiper -->
<script>
// 两个swiper共同控制时，一个为3d效果的，不可以无限轮播
var Swiper1 = new Swiper('.wrapper1 .swiper-container', {
pagination: '.swiper-pagination',
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflow: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true
}
});
var Swiper2 = new Swiper('.wrapper2 .swiper-container', {
pagination: '.pagination',
grabCursor: true,
paginationClickable: true
});
Swiper1.params.control = Swiper2;//需要在Swiper2初始化后，Swiper1控制Swiper2
Swiper2.params.control = Swiper1;//需要在Swiper1初始化后，Swiper2控制Swiper1
var Swiper3 = new Swiper('#swiper-container3',{
control: [Swiper1, Swiper2],//控制前面两个Swiper
})
</script>