Удалить слайд в JQuery bxslider

Question

Im, пытаясь удалить первый слайд после того, как он снова зациклится, я также хотел бы, чтобы пейджер не был видимым для этого слайда все время. Ive попробовал обратный вызов 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() bit

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);