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会如何反应，即你是否会在前往第二张幻灯片的途中滑过第一张幻灯片。如果是这种情况，那么这可能不会起作用。

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

2 个答案: