javascript - 如何使用JQuery和CSS制作垂直轮播新闻 slider ？

Question

我想使用 jQuery 和 CSS 创建一个垂直 slider 。这是我的代码:

HTML 和 JavaScript

<script>
    $.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible=2 data-cycle-carousel-vertical=true>
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
    <img src="http://malsup.github.io/images/beach5.jpg">
    <img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
    <button id="prev3">∧ Prev</button>
    <button id="next3">∨ Next</button>
</div>

CSS

.slideshow {
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 200px;
}
.slideshow img {
    width: 100px;
    height: 100px;
    padding: 2px;
}
div.responsive img {
    width: auto;
    height: auto
}
.cycle-pager {
    position: static;
    margin-top: 5px
}

JSFiddle

但是，它只显示两张图像。我想显示 3 或 4 张图像。

我还有一个CodePen ，但它只显示一个 slider 文本。我该如何更改并使其变为 2 至 3？

Answer 1

如果将 .slideshow 的高度设置为 312px 这应该可以完成任务。请参阅here .

或者更简单，将data-cycle-carousel-visible=X设置为所需显示的图片数量X。例如data-cycle-carousel-visible=3