<!doctype html>
<html>

<head>
  <title>Cycle2 Carousel</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script src="http://malsup.github.io/jquery.cycle2.js"></script>
  <script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css" media="all" />
</head>

<body>



  <div class="test-style">
    test style conten
  </div>


    <div class="cycle-slideshow" data-cycle-fx="carousel" 
    
    data-cycle-timeout="0" data-cycle-carousel-visible="5" data-cycle-carousel-vertical="true" 
    
    data-cycle-allow-wrap="false" data-cycle-log="false">

      <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/beach6.jpg">
      <img src="http://malsup.github.io/images/beach7.jpg">
      <img src="http://malsup.github.io/images/beach8.jpg">
      <img src="http://malsup.github.io/images/beach9.jpg"> -->
    </div>
    <div class=center>
      <a href=# id=prev3>&lt;&lt; Prev </a>
      <a href=# id=next3> Next &gt;&gt; </a>
    </div>

    <div class="cycle-pager" id=pager3></div>

</body>

</html>

// Code goes here

.test-style {
  display:none;
}