javascript - 用swiper.js怎么实现移动端既能 左右滑动导航跟着变又能点击导航切换页面
本文介绍了javascript - 用swiper.js怎么实现移动端既能 左右滑动导航跟着变又能点击导航切换页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
因为开始的时候点击导航切换内容是通过display控制的 现在用了swiper.js实现了滑动 但是不知道怎么跟导航联动 而且怎么点击导航切换
谢谢大神了 希望能帮忙写个demo><
感谢感谢
解决方案
你把导航写进分页器。
或者使用swiper提供的方法,先把这两个方法贴这。mySwiper.slideTo(index, speed, runCallbacks)onTransitionEnd(swiper)
给导航绑定事件，触发上边的回调，来进行滑动。
api部分Swiper属性和 Swiper方法部分提供了很多挺有用和奇奇怪怪的东西，有需求的时候可以看看是否有提供。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper-3.3.1.min.css"/>
<style type="text/css">
.swiper-container{
width: 400px;
height: 300px;
}
.swiper-wrapper{
height: 100%;
}
.swiper-slide{
height: 100%;
}
li{
background-color: greenyellow;
}
li.on{
background-color: green;
}
</style>
<script type="text/javascript" src="swiper.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>竖</li>
<li>着</li>
<li>的</li>
</ul>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: red;">slider1</div>
<div class="swiper-slide" style="background-color: yellow;">slider2</div>
<div class="swiper-slide" style="background-color: green;">slider3</div>
</div>
</div>
<script>
$(function(){
var mySwiper = new Swiper('.swiper-container', {
onTransitionEnd: function(swiper){
$('li').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
}
})
$('li').click(function(){
$(this).addClass('on').siblings().removeClass('on');
mySwiper.slideTo($(this).index(), 1000)
});
})
</script>
</body>
</html>
这篇关于javascript - 用swiper.js怎么实现移动端既能 左右滑动导航跟着变又能点击导航切换页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
