JQueryとCSSを使用して垂直カルーセルニューススライダーを行うには？

Question

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> 

しかし、それだけで2つの画像を見せている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も持っていますが、スライダーのテキストは1つしか表示されません。 どのように変更して2〜3にすることができますか？

Answer 1

.slideshowを312pxに設定した場合、これが有効です。 hereを参照してください。

さらに簡単には、data-cycle-carousel-visible=Xを、表示されている画像の希望量Xに設定します。たとえばdata-cycle-carousel-visible=3