Generic Content Slider/Scroller Plugin For jQuery - Power Slider

Power Slider is a lightweight yet feature-rich jQuery content slider that enables you to scroll/slide through any Html elements with various transition effects. Licensed under the GNU GENERAL PUBLIC LICENSE V2.

Basic usage:

1. Import the jQuery Power Slider plugin into your webpage, after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="power-slider.js"></script> 

2. Create a list of Html elements together with the arrows navigation and numeric pagination for the slider.

<div class="slider" id="slider">
  <ul class="sliderbox">
    <li><img src="1.jpg" alt="Image 1"></li>
    <li><img src="2.jpg" alt="Image 2"></li>
    <li><img src="3.jpg" alt="Image 3"></li>
    <li><img src="4.jpg" alt="Image 4"></li>
    <li><img src="5.jpg" alt="Image 5"></li>
  </ul>
  <ul class="slidernav">
  </ul>
  <ul class="slidertext">
  </ul>
  <div class="prev"></div>
  <div class="next"></div>
</div>

3. The required CSS styles for the slider & controls. You can override them yourself by adding your own styles in the stylesheet.

.slider {
  height: 450px;
  margin: 10px auto;
  overflow: hidden;
  position: relative;
  width: 600px;
}

.sliderbox { position: relative; }

.sliderbox li {
  width: 600px;
  height: 450px;
}

.slidernav {
  position: absolute;
  right: 4px;
  bottom: 5px;
  z-index: 1;
}

.slidernav li {
  float: left;
  width: 24px;
}

.slidernav li a {
  width: 16px;
  padding: 2px 4px;
  height: 12px;
  background: #fff;
  color: #000;
  text-align: center;
}

.slidernav li.current a {
  background: #3B8DD1;
  color: #fff;
}

.slidertext {
  background: #000;
  background: rgba(0, 0, 0, 0.6);
  filter: alpha(opacity=60);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.slidertext li {
  display: none;
  padding-left: 20px;
}

.slidertext li a {
  text-align: left;
  line-height: 30px;
  height: 30px;
  color: #fff;
}

.slider .prev {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  cursor: pointer;
  width: 61px;
  height: 61px;
  left: 0;
  background: url(images/ft_icons.png) 0 0 no-repeat;
}

.slider .next {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  right: 0;
  cursor: pointer;
  width: 61px;
  height: 61px;
  background: url(images/ft_icons.png) 0 -61px no-repeat;
}

4. Call the plugin to create a basic content slider with default settings.

$("#slider").powerSlider();

5. Available plugin options.

$("#slider").powerSlider({

// "top","left","hide","fadeTo","slideTo"
handle: "top",

// prev/next navigation
prevNext: true,

// numeric pagination
Nav: true,

// displays image caption
myTitle: false,

// animation speed
speed: 600,

// transition interval
delayTime: 6000,

// click mode for numeric pagination
clickMode: "click",

// how much items per one slide
sliderNum: 1

});

---

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