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>