Question

我想设置它，因此滑块上有3个文本/图像，它也适用于数字库，数字不能被3整除。如果有5个图像，则第一个显示3个，第二个显示2个。我在这里有一个演示： http://jsfiddle.net/vgJ9X/1/

这是我正在使用的javascript

// declare global
var slider_array = new Array();

jQuery(document).ready(function($){

    // launch bxslider
    $('.bxslider').each(function(i){
        slider_array[i] = $(this).bxSlider({controls:false, 
                                            });
    });


    // bind controls on custom controls, and run functions on every slider
    $('.bxslider-controls a').bind('click', function(e) {
      e.preventDefault();

      if($(this).hasClass('pull-left')) {
        $.each(slider_array, function(i,elem){
          elem.goToPrevSlide();  
        });

      } else if($(this).hasClass('pull-right')) {
        $.each(slider_array, function(i,elem){
          elem.goToNextSlide();  
        });
      }

    });

});

Answer 1

为了在视口中有多个幻灯片，您必须在bxSlider选项中指定宽度（例如视口的1/3），因此bxSlider以轮播模式运行，并且可以显示最大幻灯片数量在视口上。这使得bxSlider不是非常敏感，除非你通过javascript更新它（使用reloadSlider方法）。

查看http://bxslider.com/options上的公共方法以获取进一步的参考

// declare global
var slider_array = new Array();

jQuery(document).ready(function($){

  // launch bxslider
  $('.bxslider').each(function(i){
    slider_array[i] = $(this).bxSlider({controls:false, maxSlides:3, slideWidth:330 });
  });


  // bind controls on custom controls, and run functions on every slider
  $('.bxslider-controls a').bind('click', function(e) {
    e.preventDefault();

    if($(this).hasClass('pull-left')) {
      $.each(slider_array, function(i,elem){
        elem.goToPrevSlide();  
      });

    } else if($(this).hasClass('pull-right')) {
        $.each(slider_array, function(i,elem){
        elem.goToNextSlide();  
      });
    }

  });

});

bx滑块设置滑块中的图像数量

1 个答案: