Simple Automatic Image Slider jQuery Plugin - WX-Slider

WX-Slider is a simple, lightweight jQuery image slider that allows to fade or slide through a list of images with auto-rotation support. 

Features:

• Carousel like endless looping.
• Supports both vertical and horizontal slider.
• Fading and sliding transitions effects.
• Custom prev/next navigation controls.
• Transparent bottom caption bar.
• Cross browser and easy to implement.

Basic Usage:

1. Include the jQuery WX-Slider plugin after your jQuery library.

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

2. Create a list of images for the slider and then wrap the list into the 'wx-slider' container.

<div class="wx-slider">
  <ul class="slider-item-list">
    <li class="slide"><img src="1.jpg" alt="slide 1"></li>
    <li class="slide"><img src="2.jpg" alt="slide 2"></li>
    <li class="slide"><img src="3.jpg" alt="slide 3"></li>
    <li class="slide"><img src="4.jpg" alt="slide 4"></li>
    <li class="slide"><img src="5.jpg" alt="slide 5"></li>
  </ul>
</div>

3. Create prev/next navigation for the image slider.

<div class="slide-navigator">
  <a href="#" class="navi prev">Prev</a>
  <a href="#" class="navi next">Next</a>
</div>

4. Include the jQuery WX-Slider plugin after your jQuery library.

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

5. Basic styles for the image slider.

.wx-slider {
  height: 335px;
  border: 7px solid white;
  position: relative;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  overflow: hidden;
}

.slider-item-list {
  margin: 0;
  padding: 0;
}

.slider-item-list li { list-style: none; }

.slider-item-list .slide,
.slider-item-list .slide img {
  width: 446px;
  height: auto;
  position: absolute;
  z-index: 5;
}

.slider-item-list .slide.active { z-index: 10; }

6. Style the slider navigation.

.slide-navigator {
  clear: both;
  margin: 10px auto;
}

.slide-navigator .next { float: right; }

6. Style the image caption bar.

.caption-container {
  color: white;
  font-size: 24px;
  position: absolute;
  z-index: 10;
  top: 285px;
  width: 100%;
  height: 30px;
  background: rgba(0, 0, 0, .5);
  padding: 10px 0 10px 10px;
}

---

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