【问题标题】：horizontal slide with 100% width with jcarousellite带 jcarouselite 的 100% 宽度的水平幻灯片
【发布时间】：2010-07-06 21:18:47
【问题描述】：

我正在使用 jcarousellite 控件通过下一个和上一个按钮在我的图像上提供轮播效果。

<button class="prev"><<</button>
<button class="next">>></button>

<div class="anyClass" style="background-color:Red;" >

    <ul style="width:100%">
        <li style="width:100%" ><div style="background-color:Green; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-1.jpg" /></div></li>
        <li style="width:100%"><div style="background-color:yellow; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-2.jpg" /></div></li>
        <li style="width:100%"><div style="background-color:Green; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-1.jpg" /></div></li>
        <li style="width:100%"><div style="background-color:yellow; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-2.jpg" /></div></li>            
    </ul>
</div>

我希望它们扩展到浏览器的宽度。宽度：100%。由于某种原因，这不起作用。

我想问题是我如何拥有<li> 的 100% 宽度，以便它可以扩展到屏幕末尾。

===========================

更新

如果我在任何类上设置宽度：105%，那么它会给出全宽。但是，一旦我进入更大的屏幕，它就会再次出现问题......请帮助

【问题讨论】：

您希望图像也为 100% 宽度？
不只是 div...希望我能附上屏幕截图
图像应该在 div 的中心并且 div 应该是 100%...所以当我通过单击下一步滑动 div...整个 div 包括其中的图像会滑动.. .这样我可以平滑过渡...我能够做到这一点...问题是 100% 宽度
您需要在按钮文本中引用这些尖括号，例如：“<<”对于“>”。这很重要，尽管这不是您的主要问题。
<div> 样式到底是什么样的？它有填充物吗？边界？

标签： jquery jcarousellite

【解决方案1】：

我不确定它是否会起作用，但请尝试

.body {
    width: 100%;
}

在你的 CSS 中

【讨论】：

可以在线挂载一个简单的 HTML 演示吗？这会很有帮助

【解决方案2】：

我最终使用了另一个插件

【讨论】：

【解决方案3】：

实际上，我必须添加 li 和 ul 100% with and no paddin no margin...这成功了

【讨论】：

【解决方案4】：

$('.jcarousel')
    .on('jcarousel:create jcarousel:reload', function() {
        var element = $(this),
            width = element.innerWidth();

        if (width > 900) {
            width = width / 1;
        } else if (width > 600) {
            width = width / 1;
        }

        element.jcarousel('items').css('width', width + 'px');
    })
        $('.jcarousel').jcarousel();

【讨论】：

'If'条件可以根据你的要求修改