Swiper-Tap切换
Paste_Image.png
<!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 Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<script src="../dist/js/swiper.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Demo styles -->
<style>
body{
overflow: hidden;
}
#swiper-container2{
width:100%;
}
.active-nav{
border-bottom:1px solid red;
color: red;
}
#swiper-container2 .swiper-slide{
text-align: center;;
}
/**/
</style>
</head>
<body>
<div class="swiper-container" id="swiper-container2" >
<div class="swiper-wrapper">
<div class="swiper-slide active-nav">
版块1</div>
<div class="swiper-slide">
版块2</div>
<div class="swiper-slide">
版块3</div>
<div class="swiper-slide">
版块4</div>
</div>
</div>
<div class="swiper-container" id="swiper-container3" style="width:480px;">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
slider1</div>
<div class="swiper-slide red-slide">
slider2</div>
<div class="swiper-slide orange-slide">
slider3</div>
<div class="swiper-slide blue-slide">
slider4</div>
</div>
</div>
<script>
var mySwiper2 = new Swiper('#swiper-container2',{
watchSlidesProgress : true,
watchSlidesVisibility : true,
onlyExternal : true,
slidesPerView : 4,
onTap: function(){
mySwiper3.slideTo( mySwiper2.clickedIndex)
}
})
var mySwiper3 = new Swiper('#swiper-container3',{
onSlideChangeStart: function(){
updateNavPosition()
}
})
function updateNavPosition(){
$('#swiper-container2 .active-nav').removeClass('active-nav')
var activeNav = $('#swiper-container2 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
if (activeNav.index()>mySwiper2.activeIndex) {
console.log(2);
var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1
mySwiper2.slideTo(activeNav.index()-thumbsPerNav)
}
else {
console.log(3);
mySwiper2.slideTo(activeNav.index())
}
}
}
</script>
</body>
</html>
