1
  • 我有一个 100px 宽度的滑块
    • 在里面我展示了 3 张幻灯片(图片)
    • 图片 #1 和 #3 也是 100px 宽度
    • 图片 #2 宽度为 200 像素

我想要做的是视口保持在 100 像素,但是当它显示幻灯片 #2 时,我将看到前 100 像素,当幻灯片向左移动时,幻灯片 #3 滑入,我将看到剩余的 100 像素幻灯片 #2

有任何想法吗?

提前致谢!!

4

1 回答 1

1

我在这里为你做了一个(稍微大一点的)演示......

基本上,您需要执行以下操作:

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

#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
});
于 2011-10-26T07:19:26.753 回答