Basic jQuery Image Slider With CSS3 Transitions - SliderJS

A basic, lightweight, cross-browser jQuery image slider/slideshow plugin that comes with CSS3 transition based sliding effects. 

How to use it:

1. Load jQuery Javascript library and the jQuery sliderJS plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="assets/js/slider.js"></script>

2. Wrap your images into DIV containers.

<div class="slider">
  <div class="slider-container">
    <div class="slider-wrapper">
      <div class="slide"> <img src="assets/img/img1.jpg" alt=""> </div>
      <div class="slide"> <img src="assets/img/img2.jpg" alt=""> </div>
      <div class="slide"> <img src="assets/img/img3.jpg" alt=""> </div>
      ...
    </div>
  </div>
</div>

3. The required CSS styles for the image slider.

.slider {
  margin: 0 auto;
  width: 990px
}

.slider-container {
  height: 425px;
  margin: 0 auto 20px;
  overflow: hidden;
  position: relative;
  width: 990px;
}

.slider-container .slider-wrapper {
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 5000em; /*Fix for prevent display errors*/
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
}

.slider-container .slide {
  float: left;
  height: 425px;
  overflow: hidden;
  position: relative;
  width: 990px;
}

.slider-nav {
  text-align: center;
  width: 990px;
}

.slider-nav li {
  display: inline;
  padding: 3px;
}

.slider-nav .bullet {
  background-color: #59baa8;
  border-radius: 50%;
  display: inline-block;
  text-indent: -9000px;
  overflow: hidden;
  height: 16px;
  width: 16px;
}

.slider-nav .active { background-color: #e7433b }

.slider-nav .prev,
.slider-nav .next {
  background: url('img/sprite.png') no-repeat;
  display: inline-block;
  text-indent: -9000px;
  overflow: hidden;
  height: 16px;
  width: 16px;
}

.slider-nav .next { background-position: -15px top }

4. Initialize the image slider with customization options.

(function() {
Slider.init({
target: $('.slider'),
time: 6000
});
})();

---

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