[英]BxSlider change slide to a specific slide on navigation link click
I want my BxSlider slide to change to a specific slide when I click on a navigation menu item. 当我单击导航菜单项时,我希望BxSlider幻灯片更改为特定的幻灯片。 If the navigation item is second from the list, I want BxSlider to show the second slide.
如果导航项是列表中的第二项,则我希望BxSlider显示第二张幻灯片。
My navigation structure is: 我的导航结构是:
<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 & Resources</a></li>
<li><a href="#">Poll Workers</a></li>
<li><a href="#">Press & Public</a></li>
<li><a href="#">Links</a></li>
</ul><!-- /#pagination -->
</html>
It looks like you've attempted to set up anchors for the clicks. 您似乎已尝试为点击设置锚点。 I'd advise looking into the "pagerCustom" parameter of bxSlider: http://bxslider.com/options#pagerCustom
我建议您查看bxSlider的“ pagerCustom”参数: http ://bxslider.com/options#pagerCustom
Your anchors will additionally need a data-slide-index in order to function appropriately: 您的锚点还需要一个data-slide-index才能正常运行:
<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 & Resources</a></li>
<li><a data-slide-index="4" href="#">Poll Workers</a></li>
<li><a data-slide-index="5" href="#">Press & Public</a></li>
<li><a data-slide-index="6" href="#">Links</a></li>
</ul><!-- /#pagination -->
I'm assuming that you have provided the code for your click-able elements, and the actual list items in the slideshow are elsewhere. 我假设您已为可单击元素提供了代码,并且幻灯片中的实际列表项在其他位置。 Something along the lines of:
类似于以下内容:
<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>
You should be able to pass the selector for your thumbnail/anchor container ("#pagination") to the pagerCustom parameter of bxSlider. 您应该能够将缩略图/锚容器(“ #pagination”)的选择器传递给bxSlider的pagerCustom参数。 The library handles the rest!
图书馆负责其余的工作!
$('.bxslider').bxSlider({
pagerCustom: '#pagination'
});
Fiddle: http://jsfiddle.net/drjeg422/2/ (Please note: the images don't exist) 小提琴: http : //jsfiddle.net/drjeg422/2/ (请注意:图像不存在)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.