jQuery bxSlider和jQuery-ui标签

Question

我使用jQuery-ui作为它的选项卡功能，并且还使用bxSlider仅在第一个选项卡中滑动图像/内容。但是，当我点击第二个选项卡时，bxSlider“prev”和“next”选项仍在我的容器中。我试着用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

将在另一个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>