Question

我有一个宽度为100px的滑块
- 里面我正在展示3张幻灯片（图片）
- 图像＃1和＃3也是100px宽度
- 图像＃2是200px宽度

我想要做的是视口保持在100px但是当它显示幻灯片＃2时，我会看到前100px，当幻灯片向左移动时幻灯片＃3滑入，我会看到剩余100px的幻灯片＃2

有什么想法吗？

提前致谢!!

Answer 1

我做了一个（稍大一点）demo for you here ...

基本上，您需要执行以下操作：

将面板溢出设置为可见，并将所有幻灯片设置为相同的大小。

#slider .panel {
    overflow: visible;
}
#slider, #slider li {
    width: 100px;
    height: 100px;
}

然后添加一张空白幻灯片，其尺寸与其他幻灯片相同（由css设置）

<ul id="slider">
    <li><img src="http://placekitten.com/100/100" alt="" /></li>
    <li><img src="http://placehold.it/200x100" alt="" /></li>
    <li></li>
    <li><img src="http://placedog.com/100/100" alt="" /></li>
</ul>

最后，在插件初始化期间将resizeContents选项设置为false，否则将调整超宽图像以适合一张幻灯片。

$('#slider').anythingSlider({
    resizeContents: false
});

在anythingslider jquery插件中更改幻灯片宽度

1 个答案: