0.5kb Responsive Image Slideshow Plugin - PBSlider
File Size: | 4.63 KB |
---|---|
Views Total: | 107 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.