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
    });

});

我错过了有最大宽度选项的东西吗？我必须看了几个小时的选项页面，没有找到任何东西......也用Google搜索了很多但不太确定我是否提出了正确的问题。

非常感谢任何帮助。

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中未遵守宽度

1 个答案: