Question

我有一个带有bxslider的水平旋转木马滑块。我已经关闭了infiniteLoop以不允许滑块旋转我想用AJAX请求加载更多幻灯片，并在滑块到达结尾时附加到滑块。所以首先我要加载10张幻灯片，然后在滑块到达结尾时加载10张幻灯片。我在这里如何加载滑块。

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

Answer 1

你必须使用一个回调函数onSlideNext：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();
            });
          });

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

2 个答案: