Horizontal & Vertical Image Carousel Plugin For jQuery

Yet another jQuery slideshow / carousel plugin used to create horizontal, vertical or crossfading image carousels with several customization options.

Features:

• Autoplay.
• Endless looping.
• Custom trigger events.
• Custom animations.
• Support both horizontal or vertical carousel.
• Next / prev navigation and dots indicator.

How to use it:

1. Insert a list of images into the carousel.

<div id="demo" class="image-slider">
  <div class="box"> 
    <ul class="list">
      <li><a href="#"><img src="1.jpg" alt="Alt"></a></li>
      <li><a href="#"><img src="2.jpg" alt="Alt"></a></li>
      <li><a href="#"><img src="3.jpg" alt="Alt"></a></li>
      <li><a href="#"><img src="4.jpg" alt="Alt"></a></li>
    </ul>
  </div>
</div>

2. Add custom CSS styles to the carousel.

.image-slider {
  position: relative;
  height: 264px;
  width: 424px;
  overflow: hidden;
  border: 1px solid #C5C5C5;
}

.image-slider .box {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.image-slider .list {
  overflow: hidden;
  width: 9999px;
}

.image-slider .list li {
  float: left;
  position: relative;
  width: 424px;
}

.image-slider .list li a { display: block; }

.image-slider .list img { _vertical-align: top; }

.image-slider .btn {
  position: absolute;
  left: 30px;
  bottom: 30px;
  z-index: 3;
  width: 150px;
  height: 10px;
  font: 0/0 Arial;
}

.image-slider .btn li {
  display: inline-block;
  margin-right: 3px;
  width: 10px;
  height: 10px;
  background: url(../images/slide-btn.png) no-repeat -35px 0;
  cursor: pointer;
  *display: inline;
  *zoom: 1;
}

.image-slider .btn .selected {
  width: 35px;
  background-position: 0 0;
}

.image-slider .plus,  .image-slider .minus {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -17px;
  width: 55px;
  height: 35px;
  line-height: 35px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.image-slider .plus {
  right: 0;
  left: auto;
}

3. Add jQuery library and the jQuery slideshow.js script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.slideshow.js"></script>

4. Initialize the carousel. Just call the function on the top element and done.

$('#demo').slideShow({/*OPTIONS*/});

5. Full customization options.

$('#demo').slideShow({

  // custom trigger event
  events: "click",

  // x = horizontal carousel
  // y = vertical carousel
  // fade = crossfading carousel
  type: "x",

  // initial image
  start: 0,

  // animation speed
  speed: 800,

  // transition interval
  time: 2000,

  // autoplay
  auto: true,

  // show navigation
  btn: true,

  // next button
  plus: false,

  // previous button
  minus: false
  
});

---

This awesome jQuery plugin is developed by Maizi. For more Advanced Usages, please check the demo page or visit the official website.