bxslider 不显示多张幻灯片答案

【问题标题】：bxslider not showing multiple slidesbxslider 不显示多张幻灯片
【发布时间】：2013-08-05 09:25:54
【问题描述】：

我无法使用 bxslider 在 ie7、ie8 和 ie9 上制作多张幻灯片。

我有这个 jsfiddle：http://jsfiddle.net/wJV3p/1/

$(document).ready(function () {
        var slider = $('.bxslider1').bxSlider({
            mode: 'fade',
            captions: false,
            minSlides: 3,
            maxSlides: 3,
            slideMargin: 10
            });
    });

我检查了 bxslider 的代码，在我看来一切都应该正常工作。

【问题讨论】：

标签： jquery bxslider

【解决方案1】：

BxSlider 只允许您使用 mode="vertical" 或 "horizontal" 显示多个图像，而不是 mode="fade"。更改模式将解决您的问题。

【讨论】：

【解决方案2】：

为了将来参考，您可以将 fade 与 多个水平幻灯片 结合使用，仅考虑使用稍作调整。

通过使用内置的callbacksonSlideBefore和onSlideAfter，并应用一些自定义js让de ul元素在每张幻灯片之前淡出，在幻灯片完成后淡入。

例如：http://jsfiddle.net/wJV3p/22/

    $('.bxslider1').bxSlider({
     useCSS: false,
     easing: 'easeOutQuint',
     slideWidth: 100,
     minSlides: 1,
     maxSlides: 3,
     moveSlides: 3,
     slideMargin: 20,
     auto: true,
     pause: 5000,
     autoHover: true,
     speed: 0,
      onSlideBefore: function(){
        $(".bxslider1").fadeOut();
      },
      onSlideAfter: function(){
        $(".bxslider1").fadeIn();
      }
     });

【讨论】：

【解决方案3】：

虽然 BxSlider 文档确实将淡入淡出显示为一个选项，但目前尚未实现。

https://github.com/wandoledzep/bxslider/issues/13

GITHUB 页面上有很多与此相关的问题。选择一个新插件或推出你自己的插件:(

【讨论】：