Wie macht man vertikale Karussell News Slider mit JQuery und CSS?

Question

Ich möchte einen vertikalen Schieberegler mit jQuery und CSS erstellen. Hier ist mein Code:

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

aber es zeigt nur zwei Bilder. Ich möchte 3 oder 4 Bilder zeigen.

Ich habe auch eine CodePen, aber es zeigt nur einen Schieberegler Text. Wie kann ich es ändern und 2 zu 3 machen?

Answer 1

Wenn Sie die Höhe von .slideshow auf 312px setzen, sollte dies die Aufgabe erledigen. Siehe here.

Oder noch einfacher, setzen Sie die data-cycle-carousel-visible=X auf die gewünschte Anzahl X von Bildern gezeigt. Zum Beispiel data-cycle-carousel-visible=3