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="slider" class="flexslider">
  <ul class="slides">
    <li>
      slide1
    </li>
    <li>
      slide2
    </li>
    <li>
      slide3
    </li>
    <li>
      slide4
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

CSS

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

JavaScript

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