每次单击时取消滑动多张幻灯片答案

【问题标题】：Unslider multiple slides with every click每次单击时取消滑动多张幻灯片
【发布时间】：2016-08-30 13:55:31
【问题描述】：

我正在尝试让 jquery 插件 unslider 工作，每次单击下一个/上一个按钮时，下一个隐藏的幻灯片都会进入视图。

例如，如果在页面加载时只有三张幻灯片处于视图中，那么每次单击下一个箭头时，接下来的三张幻灯片就会进入查看。

我目前正在使用 unslider 工作，其中只有一张幻灯片在视图中，并且每次点击都会移动一张幻灯片。

想知道过去是否有人使用此插件完成过这种行为并愿意提供帮助？

提前致谢

$('.photo-slider').unslider({
    infinite: true,
    nav: false
});

HTML

<div class="photo-slider">
                <ul>

                    <li>
                        Hello1
                    </li>
                    <li>
                        Hello2
                    </li>
                    <li>
                        Hello3
                    </li>
                    <li>
                        Hello4
                    </li>
                    <li>
                        Hello5
                    </li>
                    <li>
                        Hello6
                    </li>
                    <li>
                        Hello7
                    </li>
                    <li>
                        Hello8
                    </li>
                    <li>
                        Hello9
                    </li>
                    <li>
                        Hello10
                    </li>
                    <li>
                        Hello11
                    </li>
                    <li>
                        Hello12
                    </li>
                    <li>
                        Hello13
                    </li>
                    <li>
                        Hello14
                    </li>
                    <li>
                        Hello15
                    </li>
                </ul>

【问题讨论】：

标签： javascript jquery html css unslider

【解决方案1】：

最好换个视图，一里加3个图片或文字，像这样：

<div class="photo-slider">
            <ul>

                <li>
                    <div>Hello1</div>
                    <div>Hello2</div>
                    <div>Hello3</div>
                </li>
                <li>
                    <div>Hello4</div>
                    <div>Hello5</div>
                    <div>Hello6</div>
                </li>
            </ul>

【讨论】：

感谢 Piotr，这可能适用于静态屏幕尺寸，但流体设计呢？
使用弹性内容css-tricks.com/snippets/css/a-guide-to-flexbox
我也有在每次点击时显示多张幻灯片的相同要求，就像 bxSlider 和 slickslide 一样。有没有我们可以使用 unslider 配置选项实现的选项？我的要求是在移动设备上每次点击显示一张幻灯片，在桌面上每次点击显示 3 张幻灯片。这可能吗？我将无法按照您的建议更改模板。