更改 everythingslider jquery 插件中的幻灯片宽度

Question

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

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

有什么想法吗？

提前致谢！！

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