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

Question

当我单击导航菜单项时，我希望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>

Answer 1

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

您的锚点还需要一个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 &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>

您应该能够将缩略图/锚容器（“ #pagination”）的选择器传递给bxSlider的pagerCustom参数。 图书馆负责其余的工作！

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

小提琴： http : //jsfiddle.net/drjeg422/2/ （请注意：图像不存在）

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

问题描述

1 个解决方案

解决方案1
0 2016-07-20 23:09:08

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

问题描述

1 个解决方案

解决方案1 0 2016-07-20 23:09:08

解决方案1
0 2016-07-20 23:09:08