gpt4 book ai didi

jquery - 实现 Swiper 链接到特定幻灯片

转载 作者:行者123 更新时间:2023-12-05 02:20:29 24 4
gpt4 key购买 nike

我正在使用 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);
})

关于jquery - 实现 Swiper 链接到特定幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39168613/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com