BxSlider在导航链接单击时将幻灯片更改为特定幻灯片
BxSlider change slide to a specific slide on navigation link click
我希望我的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 & 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>
看起来您已经尝试为点击设置锚点。我建议查看bxSlider的"pagerCustom"参数:http://bxslider.com/options#pagerCustom
您的锚点还需要一个数据幻灯片索引才能正常工作:
<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 -->
我假设您已经提供了可点击元素的代码,幻灯片中的实际列表项目在其他地方。大致如下:
<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'
});
Fiddle:http://jsfiddle.net/drjeg422/2/(请注意:图像不存在)
相关文章:
- 使用数据幻灯片到和javascript将类添加到转盘导航
- 无法调试此Navbar子导航幻灯片
- 实现幻灯片放映后,导航菜单无法工作
- jquery循环幻灯片,带有键代码导航
- 需要jquery&litte-html-css改进猫头鹰幻灯片与选项卡导航(分页)
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 使用导航按钮后,幻灯片需要暂停
- Flash CC - HTML5 Canvas:幻灯片导航
- 粘性导航显示与JQuery幻灯片缓慢下降
- 使用导航按钮制作基本 Javascript 幻灯片时出错
- 如何在幻灯片之间有条件地导航
- 煎茶触摸幻灯片导航项上的单击事件
- 将“活动”类添加到幻灯片导航中
- 整页.js - 用于控制幻灯片并保持固定在同一位置的导航元素
- swipebox.js-不可能以相反的顺序滑动或导航幻灯片
- 如何制作一个内容滑块,当用户垂直滚动或单击底部导航选项卡时显示下一张幻灯片
- 整页导航幻灯片淡入淡出问题
- 如何使用jquery创建一个带有导航按钮的幻灯片
- 在幻灯片内移动光滑的导航箭头
- 改变平板电脑的幻灯片导航