Glide.js Vertical Example

View Source
      
<!doctype html>
<html>
<head>
  <style type="text/css">
    #vertical_slider
    {
      width: 500px;
      height: 500px;
      margin: 30px auto 0;
      border: 4px solid royalblue;
      box-shadow: 0px 2px 6px #333;
    }

    .slider_container
    {
      width: 100%;
      height: inherit;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div id="vertical_slider">
    <div class="slider_container">
      <img src="imgs/vertical_img.jpg" />
      <img src="imgs/vertical_img2.jpg" />
      <img src="imgs/vertical_img3.jpg" />
      <img src="imgs/vertical_img4.jpg" />
    </div>
  </div>
  <script type="text/javascript">
    $('#vertical_slider').glide({
      preload: true,
      orientation: 'vertical',
      autoPlay: 3000
    });
  </script>
</body>
</html>