bxSlider 中不考虑宽度答案

【问题标题】：Width not being respected in bxSliderbxSlider 中不考虑宽度
【发布时间】：2015-06-23 10:27:32
【问题描述】：

我正在尝试使用 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
    });

});

我是否遗漏了可以选择最大宽度的东西？我一定已经浏览了选项页面好几个小时，但没有找到任何东西……我也用谷歌搜索了很多，但不太确定我问的问题是否正确。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery bxslider

【解决方案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 命名技巧可以有所改进，但这为我解决了问题！

希望这可以帮助其他想要做同样事情的人。

【讨论】：