jQuery bxSlider和jQuery-ui选项卡

Question

我正在使用jQuery-ui的选项卡功能，还使用bxSlider仅在第一个选项卡内滑动图像/内容。 但是，当我单击第二个选项卡时，bxSlider的“上一个”和“下一个”选项仍在我的容器中。 我尝试使用event.stopPropagation() ， event.preventDefault()和stop()来停止该功能，但在意识到这些功能不起作用之后，我尝试创建如下功能：

(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,
    });
});

任何帮助将不胜感激！ 如果无法完成此任务，是否可以将我重定向到类似的图像/内容滑块，以便我可以进行此工作？

Answer 1

将用于滑块的ul标签包装在另一个div（称为ShowcaseTab）或其他任何包装中。 然后，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>