javascript - bxslider,用于图像轮播,似乎不适合我?

标签 javascript jquery css carousel bxslider

所以我想做一个小图片库轮播。四张图片。您可以轮播到更多图像。我找到了 bxslider,它似乎是一种快速、即插即用的解决方案。但它每张幻灯片只显示一张图片。

我想我已经按照他们的指示去做了。但我显然做错了什么。

我没有动过他们的 css 和 js。我的 HTML 看起来像他们的副本。我把它放在他们的 js 文件的末尾:

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        auto: true,
        autoControls: false,
        minSlides: 4
    });
});

这是 jsfiddle:http://jsfiddle.net/7YH8Q/

有人知道我怎样才能让它工作吗?

最佳答案

问题是您没有设置 slideWidth。为了设置轮播,您必须提供 3 个值,即:slideWidth、minSlides、maxSlides

这是一个工作 fiddle http://jsfiddle.net/hwQ6C/

$('.bxslider').bxSlider({
   slideWidth: 200,
   minSlides: 4,
   maxSlides: 5,
   slideMargin: 10
});

关于javascript - bxslider,用于图像轮播,似乎不适合我?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22823614/

相关文章:

javascript - 如何从 HTML 选择框返回数组?

javascript - 制作 f 炸弹计数器不和谐机器人,Sequelize

javascript - 我如何检查 parent 在 html 中是 span 还是 anchor?

javascript - 为什么在 javascript 中,一个自调用的匿名函数会包围 jQuery onReady 回调?

javascript - hide() 在 jquery mobile 中不能完全工作

javascript - 如何在 Javascript 中获取 CSS 类属性?

html - 如何将按钮隐藏在图像文本后面并使它们在所有设备上都位于同一位置?

html - 将图像与同一行文本的左侧对齐 - Twitter Bootstrap3

javascript - jQuery 在 html 表中切换 'animation'

javascript - 悬停事件在第一次调用时停止鼠标输入事件。