Cycle2 Vertical slider

Cycle2 Vertical carousel with defined visible slides. Using jquery.cycle2.carousel.js plugin.

by omikey

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
  <div class="cycle-slideshow" 
        data-cycle-fx="carousel"
        data-cycle-timeout="0"
        data-cycle-next="#next4"
        data-cycle-prev="#prev4"
        data-cycle-carousel-visible="5"
        data-allow-wrap="false"
    data-cycle-slides="> a"
      >
    <div class="cycle-overlay"></div>
        <a href="http://google.com" data-cycle-title="first" data-cycle-  desc="first description"><img src="http://malsup.github.io/images/beach1.jpg"></a>
        <a href="http://google.com" data-cycle-title="two" data-cycle-desc="second description"><img src="http://malsup.github.io/images/beach2.jpg"></a>
        <a href="http://google.com" data-cycle-title="three" data-cycle-desc="third description"><img src="http://malsup.github.io/images/beach3.jpg"></a>
        <a href="http://google.com" data-cycle-title="four" data-cycle-desc="fourth description"><img src="http://malsup.github.io/images/beach4.jpg"></a>
       <a href="http://google.com" data-cycle-title="five" data-cycle-desc="fifth description"><img src="http://malsup.github.io/images/beach5.jpg"></a>
       <a href="http://google.com" data-cycle-title="six" data-cycle-desc="sixth description"><img src="http://malsup.github.io/images/beach6.jpg"></a>
       <a href="http://google.com" data-cycle-title="seven" data-cycle-desc="seventh description"><img src="http://malsup.github.io/images/beach7.jpg"></a>
       <a href="http://google.com" data-cycle-title="eight" data-cycle-desc="eight description"><img src="http://malsup.github.io/images/beach8.jpg"></a>
       <a href="http://google.com" data-cycle-title="nine" data-cycle-desc="ninth description"><img src="http://malsup.github.io/images/beach9.jpg"></a>
</div>

 <div class=center>
    <a href=# id=prev4><< Prev </a>
    <a href=# id=next4> Next >> </a>
 </div>

CSS

/* overlay */
.cycle-overlay { 
        position: absolute;
    bottom: 0;
    width: 150px;
    max-width: 800px;
    z-index: 600;
        background: black;
    color: white;
  }