jQuery bxSlider和jQuery-ui标签
我使用jQuery-ui作为它的选项卡功能,并且还使用bxSlider仅在第一个选项卡中滑动图像/内容。但是,当我点击第二个选项卡时,bxSlider“prev”和“next”选项仍在我的容器中。我试着用event.stopPropagation()
,event.preventDefault()
和stop()
停止功能,实现这些后没有工作,我试图创建一个像这样的功能:jQuery bxSlider和jQuery-ui标签
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
其中“#ab”是选项卡,#showcase是列表图像所在的元素。该功能并不能完全阻止bxSlider处于活动状态,它只会隐藏控件。然而,这也没有工作。
有没有人有任何想法如何做到这一点?
这里是我的HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<a href="resume-purchase.php"><img src="images/resume-temp1.jpg"></a>
<a href="resume-purchase.php"><img src="images/resume-temp2.jpg"></a>
<a href="resume-purchase.php"><img src="images/resume-temp3.jpg"></a>
</li>
<li>
<a href="#"><img src="images/resume-temp1.jpg"></a>
<a href="#"><img src="images/resume-temp2.jpg"></a>
<a href="#"><img src="images/resume-temp3.jpg"></a>
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
这里是我的JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
任何帮助将不胜感激!如果无法完成这项工作,有人可能会将我重定向到一个类似的图像/内容滑块,以便我可以完成这项工作?
将在另一个div(称为showcaseTab)中使用的滑块的ul标签或其他东西包裹起来。 bxslider将被包含在该选项卡中,并且箭头应显示并隐藏正确的方式。
<div id="showcaseTab">
<ul id="showcase">
<li>
<a href="resume-purchase.php"><img src="images/resume-temp1.jpg"></a>
<a href="resume-purchase.php"><img src="images/resume-temp2.jpg"></a>
<a href="resume-purchase.php"><img src="images/resume-temp3.jpg"></a>
</li>
<li>
<a href="#"><img src="images/resume-temp1.jpg"></a>
<a href="#"><img src="images/resume-temp2.jpg"></a>
<a href="#"><img src="images/resume-temp3.jpg"></a>
</li>
</ul>
</div>
我很欣赏这种尝试,但是这并没有奏效。我以前曾尝试过这种方法,但它不起作用,但我也尝试了您的代码,并且遇到了同样的问题。 – 2012-08-14 14:38:56
你有解决方案吗?我陷入了类似的情况。如果您找到解决方案,请发布答案。谢谢 – 2014-07-22 09:45:27
我假设箭头/控件绝对定位?我建议不要使用bxSlider的defualt控件,并使用bxSlider的方法创建自定义控件。这样你可以包含展柜内的箭头ul。看到这里:http://bxslider.com/options并寻找“goToNextSlide”和“goToPrevSlide” – 2014-07-22 17:04:21
你有测试链接,你可以显示,所以我们可以看到发生了什么? – 2012-08-13 23:36:45