代码之家 › 专栏 › 技术社区 › Zeus

100%宽度的水平滑动,带J形花岗岩

jcarousellite jquery

1

Zeus · 技术社区 · 14 年前

我使用jcarouselite控件通过next和prev按钮为我的图像提供旋转效果。

<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%。由于某种原因,这不起作用。

我想问题是,我怎样才能有100%的宽度 <li> 这样它就可以扩展到屏幕的末尾。

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

更新

如果我在任何类上设置宽度:105%,那么它将给出全宽。然而,一旦我进入大屏幕,它又会产生问题……请帮助我。

4 回复 | 直到 9 年前

1

Germán Rodríguez 14 年前

我不确定它能用,但是试试看

.body {
    width: 100%;
}

在你的CSS中

2

1

Zeus 14 年前

我最终使用了另一个插件

3

0

Zeus 14 年前

事实上,我必须加上100%的李和乌尔,没有帕丁,没有利润……这就成功了。

4

0

Linto Thomas 9 年前

$('.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();