Rog*_*rHN 5 jquery slide swiper.js
我正在使用 iDangero Swiper 并尝试创建指向特定幻灯片的链接，我将使用它通过唯一链接链接所有幻灯片。
我怎样才能做到这一点？
这是我的代码：
http://codepen.io/RogerHN/pen/LkKgXB
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://idangero.us/swiper/dist/css/swiper.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<button type="button" class="btn btn-primary btn-lg btn-block btn-title">
<a class="white" href="#">
<span class="glyphicon glyphicon-chevron-left back" aria-hidden="true"></span>
</a>
TITLE
</button>
<a href="#">Swipe to slide 3</a>
<div id="content">
<div class="nav-center">
<div class="nav-bg">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#one" data-toggle="tab">First Tab</a></li>
<li><a href="#two" data-toggle="tab">Second Tab</a></li>
<li><a href="#three" data-toggle="tab">Third Tab</a></li>
</ul>
</div>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="one">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Slide1</p>
</div>
<div class="swiper-slide">
<p>Slide2</p>
</div>
<div class="swiper-slide">
<p>Slide3</p>
</div>
</div>
</div>
</div> <!-- #one -->
<div class="tab-pane" id="two">
<p>Content</p>
</div>
<div class="tab-pane" id="three">
<p>Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
})
</script>
</body>
</html>
您可以为链接提供一个 id：
<a href="#" id="slide3">Swipe to slide 3</a>
然后你可以使用方法slideTo()使Slider滑动到你想要的幻灯片
var swiper = new Swiper('.swiper-container', {})
$('#slide3').click(swiper,function(){
swiper.slideTo(3);
})
| 归档时间： |
|
| 查看次数： |
17162 次 |
| 最近记录： |