刪除幻燈片jquery bxslider

Question

即時通訊，試圖刪除第一張幻燈片之前，它迴環繞之前，我也不希望該頁面可見的幻燈片整個時間。我嘗試了onBeforeSlide回調，以便它在運行中運行，然後在更新更改後調用slider.reloadSlider（）。我也試着手動調用slider.redrawSlider（），但沒有奏效。

問題是當我調用第一個元素上的$（element）.remove（）以及當我調用slider.reloadSlider（）時會凍結。任何幫助將非常感激。我的代碼如下。

！HTML！

<div id="landing-slider"> 
    <ul class="bxslider"> 
     <li id="first-image"> 
      <img class="slide-img" id="img0" src="/landing-page/S1.2.png" alt="Landing  Opening TV Image"/> 
     </li> 

     <li> 
      <img class="slide-img" id="img1" src="/landing-page/0.png" alt="slide image 1"/> 

      <div style="font-size:16px; padding:0px 40px;"> 
       <p><b>1. Just enter your first name.</b></p> 

       <p>Just type your first name into the box on the left this page.</p> 
      </div> 
     </li> 

     <li> 
      <img class="slide-img" id="img2" src="/landing-page/1.png" alt="slide image 2"/> 
      <div style="font-size:16px; padding:0px 40px;"> 
       <p><b>2. Select your best option.</b></p> 

       <p>Simply select the best option for you based on your situation and what you want to 
        accomplish.</p> 
      </div> 
     </li> 
     <li> 
      <img class="slide-img" id="img3" src="/landing-page/2.png" alt="slide image 3"/> 

      <div style="font-size:16px; padding:0px 40px;"> 
       <p><b>3. Zoom throughout the process.</b></p> 

       <p>Breeze through the simple, fun and exciting steps (and skip anything that isn't relevant to 
        you).</p> 
      </div> 
     </li> 
     <li> 
      <img class="slide-img" id="img4" src="/landing-page/3.png" alt="slide image 4"/> 

      <div style="font-size:16px; padding:0px 40px;"> 
       <p><b>4. Get your personal results.</b></p> 

       <p>In just minutes get complete and easy access to the best options (you may never otherwise even 
        know about) and much, much more...</p> 
      </div> 
     </li> 
    </ul> 
</div> 

！Javascript！

var landingSlider = $('.bxslider').bxSlider({ 
     pager: true, 
     auto: true, 
     autoControls: true, 
     pause: 1500, 
     onSlideBefore: function($elment, oldIndex, newIndex){ 
     if($elment.is($("#first-image"))){ 
      $("#first-image").remove(); 
      landingSlider.reloadSlider(); 
      landingSlider.redrawSlider(); 
     } 
     }, 
     onSlideAfter: function() { 
      $('.bx-start').trigger('click'); 
     } 
    }); 

Answer 1

有點不雅，但也許像（假設你的暫停是1500同上，設置超時第一張幻燈片已完成剛過）

setTimeout(function(){ 
    $('#first-image').remove(); 
},2000); 

將在$(document).ready(function(){但外面的這個任何地方bxslider()位

Answer 2

想通了，答案是我的回調沒有重置滑塊的設置，所以它被設置爲默認值，滑塊停止自動轉換。我製作了一個設置對象，並在第一張幻燈片被刪除後重新加載了這些設置。

 var timeBetweenSlides = 4000; 
     var timeToChangeSlide = 500; 
     var landingSliderSettings = { 
      startSlide: 0, 
      speed: timeToChangeSlide, 
      pause: timeBetweenSlides, 
      pager: true, 
      auto: true, 
      autoControls: true, 
      onSlideAfter: function() { 
       $('.bx-start').trigger('click'); 
      }, 
      onSlideBefore: function($elment, oldIndex, newIndex){ 
       if($elment.is($("#first-image"))){ 
        $("#first-image").remove(); 
        landingSlider.reloadSlider(landingSliderSettings); 
       } 
      } 
     } 
     var landingSlider = $('.bxslider').bxSlider(landingSliderSettings);