gpt4 book ai didi

jquery - iDangerous Swiper,缩略图控制

转载 作者:搜寻专家 更新时间:2023-10-31 08:06:08 24 4
gpt4 key购买 nike

我是一名初学者。有谁知道如何将缩略图图像链接到滑动器,以便单击缩略图将滑动器容器移动到相应的幻灯片?感谢您的帮助!

示例:http://markdarren.com/F13/test.html

    <div class="swiper-container">  
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/jacket2.png"></div>
<div class="swiper-slide"><img src="images/jacket3.png"></div>
<div class="swiper-slide"><img src="images/jacket4.png"></div>
<div class="swiper-slide"><img src="images/jacket5.png"></div>
</div>
</div>
<div class="thumb">
<div><a href="" title="onClick goto jacket 2"><img src="images/jacket2.png"></a></div>
<div><a href="" title="onClick goto jacket 3"><img src="images/jacket3.png"></a></div>
<div><a href="" title="onClick goto jacket 4"><img src="images/jacket4.png"></a></div>
<div><a href="" title="onClick goto jacket 5"><img src="images/jacket5.png"></a></div>
</div>
<script src="js/scroller/js/jquery-1.10.1.min.js"></script>
<script src="js/scroller/js/idangerous.swiper-2.0.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
})
</script>

最佳答案

将脚本标记中的所有内容更改为:

$(document).ready(function() {

var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
});

$(".thumb").on('click', 'div', function(){
mySwiper.slideTo($(this).index(), 500);
});
});

我添加的位没有经过测试,但应该意味着点击您的 .thumbs 位中的一个 div(我忽略了您的 a 标签)将滑动到该 div 的索引(例如是 div 1、div 2 等)。

关于jquery - iDangerous Swiper,缩略图控制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17413572/

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