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

Question

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

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

有任何想法吗？

提前致谢！！

Answer 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
});