bxslider - 删除 bxSlider onSliderAfter 中的第一张幻灯片而不破坏它

Question

我想使用 bxSlider 制作一个滑块，但第一张幻灯片出现一次。这只是一张介绍幻灯片，在加载下一张后将被删除。

HTML

<div id="slider">
    <ul>
        <li class="one"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

我试过类似的东西

    $('#slider ul').bxSlider({
        pager: false,
        auto: true,
        onSlideAfter : function(){
            $('#slider ul li.one').remove();
        }
    });

但这可能会在滑块的宽度不等于它的初始宽度之前使滑块崩溃，因为已经删除了一张幻灯片。关于我应该如何做到的任何线索？

Answer 1

经过一番搜索和测试后，出现了

var topSlider = $('#slider ul').bxSlider({
    pager: false,
    auto: true,
    onSlideAfter : function(){
        if($('#slider ul li.one').length >= 1){
            $('#slider ul li.one').remove();
            topSlider.reloadSlider();
        }
    }
});

因此，当第二张幻灯片完成后，我检查第一张幻灯片是否仍然存在，如果存在，我将其删除并重新加载没有它的滑块。似乎工作得很好。

Answer 2

不如不删除它，onSlideBefore而是检查是否要转到第一张幻灯片，以及是否立即将其发送到第二张幻灯片？

$('#slider ul').bxSlider({
    pager: false,
    auto: true,
    onSlideBefore : function($slideElement, oldIndex, newIndex){
      if(newIndex == 0){
        $('#slider ul').bxSlider.goToSlide(1);
      }
    }
});

我不确定 bxslider 会如何反应，即您是否会在前往第二张幻灯片的途中滑过第一张幻灯片。如果是这种情况，那么这可能行不通。