在bxSlider中不考虑宽度 [英] Width not being respected in bxSlider

问题描述

我正在尝试使用jQuery插件bxSlider进行幻灯片演示.

I am trying to make a slideshow with the jQuery plugin bxSlider.

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

Ultimately what I am trying to achieve is this: http://i.imgur.com/yae1Gvy.jpg

尽管我刚刚在网上找到了这张图片.我不太担心滚动条. 我只希望3张图像中的2张离开页面. bxSlider有一个选项可以设置幻灯片的宽度(slideWidth)，我希望该宽度为图像的宽度:680px.

Although I just found that image online. I'm not too worried about the scroll bar. I just want 2 of the 3 images to go off the page. bxSlider has an option to set the width of the slides (slideWidth) and I want that width to be the width of the image: 680px.

但是3张幻灯片的容器不能以正常宽度容纳所有3张幻灯片，因此它将每个幻灯片最大化为$(window).width()/3，然后将其作为内联样式应用，因此我无法覆盖它.如果我将值更改为较小的值，则它可以正常工作并很好地适合容器，但我需要将其移出视口.

The container of the 3 slides however will not fit all 3 slides at their normal width so it maxes each slide out at $(window).width() / 3 and then applies that as an inline style so i cant override it. If i change the value to a smaller one then it works fine and fits nicely into the container but i need it to go out of the viewport.

从本质上讲，这是我想要实现的目标，除大小问题外，我希望达到90％: http: //www.aucklanddj.co.nz/weddings

Essentially this is what I would like to achieve and im 90% there apart from the sizing issue: http://www.aucklanddj.co.nz/weddings

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

The website linked above is using the same jQuery plugin.

这里是我的代码:

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:

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

});

我错过了可以选择最大宽度的东西吗?我一定已经看了选项页面好几个小时了，却没有发现任何东西...也用谷歌搜索了很多，但是不确定我是否在问正确的问题.

Am I missing something where there is an option for max width or something? I must have looked over the options page for a good few hours and not found anything...also googled it a lot but not quite sure if I'm asking the right questions.

任何帮助将不胜感激.

推荐答案

确定，所以原来我的问题是包含元素.

OK so it turns out my problem was with the containing element.

基本上，我必须添加2个包含div的元素.我的HTML现在看起来像这样:

Basically I had to add 2 containing divs. My HTML now looks like this:

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

如果您需要居中放置所有内容，请去除第一个容器中的宽度.

If you need to center everything get rid of the width in the first container.

Javascript与原始问题完全相同.

The Javascript is exactly the same as in the original question.

很明显，我的div命名技能可以做一些改进，但这为我解决了这个问题！

Clearly my div naming skills could do with some improvement but that solved the problem for me!

希望这可以帮助其他希望做相同事情的人.

Hope this helps anyone else looking to do the same thing.

这篇关于在bxSlider中不考虑宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！