bxSlider 中不考虑宽度

Question

我正在尝试使用 jQuery 插件 bxSlider 制作幻灯片。

最终我想要实现的是：http://i.imgur.com/yae1Gvy.jpg

虽然我刚刚在网上找到那个图片。我不太担心滚动条。我只想让 3 张图片中的 2 张离开页面。 bxSlider 有一个选项可以设置幻灯片的宽度 (slideWidth)，我希望该宽度为图像的宽度：680px。

然而，3 张幻灯片的容器不会以其正常宽度容纳所有 3 张幻灯片，因此它在 $(window).width() / 3 处最大化每张幻灯片，然后将其作为内联应用风格所以我不能覆盖它。如果我将值更改为较小的值，那么它可以正常工作并且很适合容器，但我需要它离开视口。

基本上这是我想要实现的，除了尺寸问题，我已经达到了 90%：http://www.aucklanddj.co.nz/weddings

上面链接的网站使用相同的 jQuery 插件。

这是我的代码：

HTML:

<ul class="slide-container">
    <li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
    <li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
    <li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
</ul>

Javascript:

$(document).ready(function(){

$('.slide-container').bxSlider({
        auto: true,
        useCSS: false,
        pager: false,
        controls: false,
        autoHover: true,
        minSlides: 3,
        maxSlides: 3,
        slideWidth: 680,
        slideMargin: 0,
        preloadImages:"visible",
        moveSlides: 1,
        captions: true,
        responsive: false
    });

});

我是不是漏掉了最大宽度选项之类的东西？我肯定已经查看选项页面好几个小时了，但没有找到任何东西……也用谷歌搜索了很多，但不太确定我问的问题是否正确。

如有任何帮助，我们将不胜感激。

Answer 1

好的，原来我的问题出在包含元素上。

基本上我必须添加 2 个包含 div 的。我的 HTML 现在看起来像这样：

<div class="slider-outer-container">
        <div class="bx-slide-container">
            <ul class="bx-slides">
                <li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
                <li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
                <li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
            </ul>
        </div>
    </div>

和我的 css 用于这些容器：

.slider-outer-container{
    overflow:hidden;
}
.bx-slide-container{
    width:3120px;
    margin-left:-1040px;
    margin-right:-1040px;
}

如果您需要将所有内容居中，请去掉第一个容器中的宽度。

Javascript与原题完全相同

显然我的 div 命名技巧可以做一些改进，但这解决了我的问题！

希望这对其他想做同样事情的人有所帮助。

bxSlider 中不考虑宽度

Width not being respected in bxSlider

javascript

jquery

bxslider