0

我目前正在尝试使用引导程序构建一个站点。到目前为止一切都很顺利,直到我将 bx-slider 插件插入页面。

目前它增加了width: 999999px当我检查元素时的宽度,你可以想象它导致布局看起来很糟糕。滑块中的图像具有相同的高度和宽度。

这是html

 <div class="row-fluid">
            <div id="bx-slider" class="span9">
                <div>
                    <div>
                        <img src="img/working-together.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/discussion.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/facilitator.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/leadership.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/success.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="img/teamwork.png" />
                    </div>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                            Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                            Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                            Phasellus dapibus pretium aliquam. 
                            Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                        </p>
                    </div>
                </div>
            </div>
            <div class="span3">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    In libero ante, egestas non interdum sed, vestibulum ullamcorper dui. 
                    Nunc consectetur commodo quam, vel accumsan erat ultrices nec. 
                    Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante. 
                    Phasellus dapibus pretium aliquam. 
                    Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
                </p>
            </div>
        </div>
    </div>

这是JS

$(function(){
$('#bx-slider').bxSlider ({
   minSlides: 1,
   maxSlides: 10,
   auto: true,
   pager: false,
   controls: false,
   autoDelay: 1000,
   autoHover: true,
   slideWidth: 770
});});

如您所见,我已尝试按照该网站上的建议添加 slideWidth 和 max min 幻灯片。

有没有人有什么建议?

只是将滑块更改为无序列表,并且将每张幻灯片更改为列表元素无济于事。滑块包装器和窗口的宽度很好,但它似乎将宽度添加到 bx-slider 元素。

4

1 回答 1

0

简单的答案是在 bx 滑块周围放置一个包含 div 的内容,并将 span 类附加到该滑块上,因此最终会像这样。

<div class="span9">
    <ul id="bx-slider" class="slider-border">                      
       <li>
       </li>
    </ul>
</div>
于 2012-11-24T13:32:57.820 回答