0.5kb Responsive Image Slideshow Plugin - PBSlider

PBSlider is an ultra-light (~0.5k) jQuery plugin for creating responsive image slideshows with cross-fade transitions and sliding captions on the web.

How to use it:

1. Add slides as list items to the slideshow.

<ul class="pbSliderContainer">
  <li class="pbSlider slide1 active">
    <img src="1.jpg" alt="Alt 1">
    <div class="PBcaption">
      <h2>Slide 1 Caption</h2>
      <p><a href="#">Read More..</a></p>
    </div>
  </li>
  <li class="pbSlider slide2 hidden">
    <img src="2.jpg" alt="Alt 2">
    <div class="PBcaption">
      <h2>Slide 2 Caption</h2>
      <p><a href="#">Read More..</a></p>
    </div>
  </li>
  <li class="pbSlider slide3 hidden">
    <img src="3.jpg" alt="Alt 3">
    <div class="PBcaption">
      <h2>Slide 3 Caption</h2>
      <p><a href="#">Read More..</a></p>
    </div>
  </li>
  ... more slides here
</ul>

2. Load the main script PBslider.min.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/PBslider.min.js"></script>

3. Add the main CSS styles to your page. That's it.

.pbSliderContainer {
  position:relative;
}
.pbSlider {
  position:absolute;
  top:0;
  left:0;
}

.pbSlider img {
  max-width:100%;
}

.active {
  display:block;
}

.hidden {
  display:none;
}

4. Override the default transition delay in the JS.

delay = 5000,

---

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