BX滑块加载更多幻灯片，检测何时到达终点

Question

我有一个带有 bxslider 的水平轮播滑块。我已经关闭了无限循环，不允许滑块旋转。
我想使用 AJAX 请求加载更多幻灯片，并在滑块到达末尾后附加到滑块。因此，首先我加载了 10 张幻灯片，然后在滑块到达末尾时想要加载更多 10 张幻灯片。这是我如何加载滑块的。

$('.bxslider_read').bxSlider({
        minSlides: 3,
        maxSlides: 6,
        slideWidth: 110,
        slideMargin: 10,
        pager:false,
        infiniteLoop:false,
        mode: 'horizontal'
    });

Answer 1

您必须在幻灯片上使用回调函数下一个：function（）{/检查下一张幻灯片，如果上次从 ajax 加载数据并附加到滑块并移动到加载侧/}

然后你完成的代码看起来像：-

var sliderSelector = '.bxslider_read';
sliderInstance = $(sliderSelector).bxSlider({
  minSlides: 3,
  maxSlides: 6,
  slideWidth: 110,
  slideMargin: 10,
  pager:false,
  infiniteLoop:false,
  mode: 'horizontal',
  onSlideNext: function(slideEl, oldSlide, newSlide){
    /* we are loading next slides as we reaches last slide */
    if(sliderInstance.getSlideCount() == (newSlide + 1)){
      $.ajax({
        url:"url to load next slides",
        success:function(data){
          /* response from server must be slide elements */
          $(sliderSelector).append(data);
          /* we need to restart slider */
          sliderInstance.reloadSlider();
          sliderInstance.goToSlide(sliderInstance.getCurrentSlide());
        }
      });
    }
  }
});

Answer 2

这是我的代码：

$(document).ready(function () {
            var slider = $('.bxslider').bxSlider({
                adaptiveHeight: true,
                pager: false,
                controls: false,
                infiniteLoop: false,
            });
            $('#pronext').click(function () {
                //return false;
                var current = slider.getCurrentSlide() + 1;
                var total = slider.getSlideCount();
                if (current == total) {
                    alert('Finished');
                }
                slider.goToNextSlide();
            });
          });