我想使用jQuery和CSS创建一个垂直滑块。这是我的代码:
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,但是它只显示一个滑块文本。
如何更改并使其变为2到3?
最佳答案
如果将.slideshow
的高度设置为312px
,则应完成此工作。
请参见here。
甚至更容易地,将data-cycle-carousel-visible=X
设置为所需的所显示图片数量X。例如data-cycle-carousel-visible=3