title: How to do vertical carousel news slider using JQuery and CSS?
body: <p>I want to create a vertical slider using jQuery and CSS. Here is my code:</p>
  
  <p><strong>HTML &amp; JavaScript</strong></p>
  
  <pre><code>&lt;script&gt;
      $.fn.cycle.defaults.autoSelector = '.slideshow';
  &lt;/script&gt;
  &lt;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&gt;
      &lt;img src="http://malsup.github.io/images/beach1.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach2.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach3.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach4.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach5.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach9.jpg"&gt;
  &lt;/div&gt;
  &lt;div class="center"&gt;
      &lt;button id="prev3"&gt;∧ Prev&lt;/button&gt;
      &lt;button id="next3"&gt;∨ Next&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/natnaydenova/7uXPx/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>However, it's showing only two images. I want to show 3 or four images.</p>
  
  <p>I also have a <a href="https://codepen.io/danbhala/pen/eNZrQW" rel="nofollow noreferrer">CodePen</a>, but it's showing only one slider text.
  How can I change and make it 2 to 3?</p>