[英]How to do vertical carousel news slider using JQuery and CSS?
I want to create a vertical slider using jQuery and CSS. 我想使用jQuery和CSS创建一个垂直滑块。 Here is my code:
这是我的代码:
HTML & JavaScript 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 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
}
However, it's showing only two images. 但是,它仅显示两个图像。 I want to show 3 or four images.
我想显示3或4张图片。
I also have a CodePen , but it's showing only one slider text. 我也有一个CodePen ,但是它只显示一个滑块文本。 How can I change and make it 2 to 3?
如何更改并使其变为2到3?
If you set the height of .slideshow
to 312px
this should do the job. 如果将
.slideshow
的高度设置为.slideshow
, 312px
应该可以完成这项工作。 See here . 看这里 。
Or even easier, set the data-cycle-carousel-visible=X
to the desired amount X of pictures shown. 甚至更容易地,将
data-cycle-carousel-visible=X
设置为所需的所示图片数量X。 For example data-cycle-carousel-visible=3
例如
data-cycle-carousel-visible=3
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.