gpt4 book ai didi

javascript - BxSlider 将幻灯片更改为导航链接上的特定幻灯片单击

转载 作者:行者123 更新时间:2023-11-28 05:31:36 25 4
gpt4 key购买 nike

当我单击导航菜单项时,我希望我的 BxSlider 幻灯片更改为特定幻灯片。如果导航项在​​列表中排在第二位,我希望 BxSlider 显示第二张幻灯片。

我的导航结构是:

<html>
<ul id="pagination" class="clearfix">
<li><a href="#">Voter Tools</a></li>
<li><a href="#">Candidate Tools</a></li>
<li><a href="#">Ballot Issues</a></li>
<li><a href="#">Data &amp; Resources</a></li>
<li><a href="#">Poll Workers</a></li>
<li><a href="#">Press &amp; Public</a></li>
<li><a href="#">Links</a></li>
</ul><!-- /#pagination -->
</html>

最佳答案

您似乎已尝试为点击设置 anchor 。我建议查看 bxSlider 的“pagerCustom”参数:http://bxslider.com/options#pagerCustom

您的 anchor 还需要数据幻灯片索引才能正常运行:

<ul id="pagination" class="clearfix">
<li><a data-slide-index="0" href="#">Voter Tools</a></li>
<li><a data-slide-index="1" href="#">Candidate Tools</a></li>
<li><a data-slide-index="2" href="#">Ballot Issues</a></li>
<li><a data-slide-index="3" href="#">Data &amp; Resources</a></li>
<li><a data-slide-index="4" href="#">Poll Workers</a></li>
<li><a data-slide-index="5" href="#">Press &amp; Public</a></li>
<li><a data-slide-index="6" href="#">Links</a></li>
</ul><!-- /#pagination -->

我假设您已经提供了可点击元素的代码,而幻灯片中的实际列表项在其他地方。类似的东西:

<ul class="bxslider">
<li><img src="/images/Voter_Tools.jpg" /></li>
<li><img src="/images/Candidate_Tools.jpg" /></li>
<li><img src="/images/Ballot_Issues.jpg" /></li>
<li><img src="/images/Data_and_Resources.jpg" /></li>
<li><img src="/images/Poll_Workers.jpg" /></li>
<li><img src="/images/Press_and_Public.jpg" /></li>
<li><img src="/images/Links.jpg" /></li>
</ul>

您应该能够将缩略图/ anchor 容器的选择器(“#pagination”)传递给 bxSlider 的 pagerCustom 参数。图书馆会处理剩下的事情!

$('.bxslider').bxSlider({
pagerCustom: '#pagination'
});

fiddle :http://jsfiddle.net/drjeg422/2/(请注意:图片不存在)

关于javascript - BxSlider 将幻灯片更改为导航链接上的特定幻灯片单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38486468/

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