FlexSlider+Carousal

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<!-- Place somewhere in the <body> of your page -->
<div id="whs-slider" class="flexslider">
  <ul class="slides" style="text-align: center;">
    <li><a href="#">test1</a></li>
    <li><a href="#">test2</a></li>
    <li><a href="#">test3</a></li>
    <li><a href="#">test4</a></li>    
  </ul>
</div>

CSS

#carousel .flex-active-slide {
    opacity: .5;
}

JavaScript

$('#whs-slider').flexslider({
    animation: "slide",
    controlNav: false,
    slideshow: false,
    direction: "vertical",
    touch: true
  });