Lightweight Image Carousel/Slideshow Plugin For jQuery - vSlideshow

vSlideshow is an extremely lightweight, highly customizable jQuery slideshow plugin for presenting your pictures in a carousel-style fashion.

How to use it:

1. Load jQuery library and the jQuery vSlideshow plugin at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="slideshow.js"></script>

2. Insert your images as slides into the slideshow.

<div class="slideshow-wrapper">
  <div class="slideshow">
    <div class="slide"><img src="1.jpg"></div>
    <div class="slide"><img src="2.jpg"></div>
    <div class="slide"><img src="3.jpg"></div>
  </div>
</div>

3. Basic CSS styles for the image slideshow.

.slideshow-wrapper {
  width: 620px;
  height: 360px;
  position: relative;
  overflow: hidden;
}

.slideshow {
  width: 999999px;
  position: absolute;
}

.slideshow .slide {
  width: 620px;
  height: 360px;
  float: left;
}

4. Style the next/prev and bullets navigation.

.slideshow-nav {
  width: 620px;
  position: relative;
  margin: 5px 0;
}

.slideshow-nav .active {
  background: none;
  border: 1px solid #333333;
}

.slideshow-nav .prev,
.slideshow-nav .next {
  position: absolute;
  color: #000000;
  text-decoration: none;
}

.slideshow-nav .prev { left: 0; }

.slideshow-nav .next { right: 0; }

.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 5px;
  background: #333333;
  cursor: pointer;
}

5. Initialize the image slideshow.

$(document).ready( function() {
  $(".slideshow").slideshow({

    // transition speed
    speed: 500,

    // transition delay time
    pause: 2000,

    // slide animation
    effect: "slide",

    // navigation CSS classes
    tabClass: ".tab",
    prevClass: ".prev",
    nextClass: ".next",

    // auto-play
    auto: true

  });
});

---

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