个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当我单击导航菜单项时，我希望我的 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>
最佳答案
您似乎已尝试为点击设置 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 & 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>
您应该能够将缩略图/ 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
你能帮我解决这个问题吗？当我按下下一个键(右箭头)时，我试图将箭头控件(左和右)集成到 BxSlider 显示最后一个 slider 图像，它不应该显示，而是显示下一个 slider 图像，然后与前一
我使用以下代码创建 bxslider 我无法将图像超链接到特定链接，即我想将每张幻灯片链接到网址这可能吗？该项目已经达到了我无法将其更改为另一个 jquery 插件的地步
我有一个使用 bxslider 的非常基本的 slider 。 我想在 bxslider 本身内运行另一个画廊。 请看这个 fiddle :http://jsfiddle.net/CHeLE/6/ 当
我正在使用“D5 Socialia”主题版本 1.2.8、WordPress 3.7 并在我的网站上安装了 lumia-bxslider slider 插件。 我遇到了这些问题: - Height w
其中一个应用程序必须使用 bxslider。我在尝试通过 ajax 实现带有动态加载内容的 bxslider 时遇到了一些问题。 它突然起作用了。有趣的是，当通过打开开发工具或更改窗口大小对视口(vi
我刚刚开始使用 bxSlider，但遇到了问题。我想要一个具有固定宽度(所有图像具有相同值)和自适应高度的 slider 。这是一项非常标准的任务，但我被困住了，我不知道该怎么办。现在 bxSlide
我正在使用 bx-slider 并面临一个问题，即 slider 的页面加载图像无法完美加载。我希望图像应该在页面加载时完全加载或在完成页面加载后加载，否则图像将隐藏直到页面未完全加载。这是java脚
不确定是我瞎了还是根本就没有。我想在特定宽度上停止 bxSlider 自动播放？就这么简单 最佳答案 通常，您会像这样启动 bxSlider... $(document).ready(function
如何使第一个bxslider幻灯片向左移动-26px？我在 slider 中找到了这一行: propValue = slider.settings.mode === 'vertical' ? 'tra
我的网页上有一个 bxSlider。当鼠标悬停在自定义分页器上时，我试图停止 slider 。这是我的 html:
我在我的网站上使用 bxSlider。 slider 应在窗口调整大小时重新加载。通过代码，我实际上使用 slider 在加载和调整大小时加载。但 slider 没有重新加载，而是第二次加载。所以我有
我的 中大约有 10-15 张幻灯片。 最大幻灯片数为 4，但仅显示 1 张幻灯片。页面加载时， slider “闪烁”，并显示 4 张幻灯片，但之后又显示一张幻灯片。 slider 出了什么问题？感
我使用这个 slider http://bxslider.com/examples/thumbnail-pager-1 。它有效，但我有很多元素，缩略图不适合一行并移至下一行。如何像轮播一样制作缩略图
我正在使用 bxslider 制作一个简单的轮播，每张幻灯片一张 jpg。因为我有 8 张 jpg，所以每张幻灯片底部显示 8 个项目符号。我有什么方法可以删除或隐藏它们。 最佳答案 bxslider
我目前已经在我正在开发的网站上实现了 bxslider。相关页面上有 3 个 slider ，带有自定义下一个和上一个控件。 我使用类而不是 id 设置了 bxslider。 $('.carousel
我正在使用一个使用 jQuery bxslider 脚本的 WordPress 网站，并尝试在其中一张幻灯片的内容中编写一个 href 链接，单击该链接即可转到下一张幻灯片。 我对 php 以及 bx
我已将 bxSlider 集成到现有应用程序中，显示三张不同的幻灯片。每张幻灯片都包含一个 HTML Canvas ，该 Canvas 会定期更新为新的 JCharts 图表。它工作完美!只是...最
我在我的一个网站中使用 bxslider 作为简单的视频 slider 。但 slider 中的所有视频都会开始加载播放。我必须禁用它。 HTML: result() as $vdo){
我不确定 slider 顶部和底部的额外空白来自哪里。是填充还是边距？如果有人可以帮助我，我将不胜感激。 jsfiddle.net/fH3EL 最佳答案 这是因为 bx-slider CSS 文件造成
我似乎遇到了一个我没有在其他地方看到的问题。 我们在客户网站 (www.laparksfoundation.org) 上有一个 slider 。我们将 slider 设置为 infiniteloop
我是一名优秀的程序员,十分优秀！