Basic Image Slideshow Plugin With jQuery - phSlideshowJS
File Size: | 11 KB |
---|---|
Views Total: | 1910 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

phSlideshowJS is a lightweight jQuery slideshow carousel plugin for fading through a series of images with captions and interactive controls.
Features:
- Navigation arrows on hover.
- Autoplay with play/pause controls.
- Configurable animation speed.
- Works with images with varying sizes.
- Auto exacts captions from image's
title
attribute. - Cross browser.
How to use it:
1. To use the slideshow, insert jQuery library and the phSlideshowJS plugin's files into the html page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="phSlideshow.js"></script> <link rel="stylesheet" href="phSlideshow.css">
2. Add a series of images to the slideshow and define the captions in the title
attribute as these:
<div class="slideshow"> <img src="1.jpg" title="caption1" /> <img src="2.jpg" title="caption2" /> <img src="3.jpg" title="caption3" /> <img src="4.jpg" title="caption4" /> <img src="5.jpg" title="caption5" /> <img src="6.jpg" title="caption6" /> </div>
3. Add controls to the slideshow.
<div class="slideshow"> <div class="slideshow-prev"></div> <div class="slideshow-next"></div> <div class="slideshow-controls"> <div class="slideshow-resume"></div> <div class="slideshow-pause"></div> </div> <img src="1.jpg" title="caption1" /> <img src="2.jpg" title="caption2" /> <img src="3.jpg" title="caption3" /> <img src="4.jpg" title="caption4" /> <img src="5.jpg" title="caption5" /> <img src="6.jpg" title="caption6" /> </div>
4. Add a caption bar to the slideshow.
<div class="slideshow"> <div class="slideshow-prev"></div> <div class="slideshow-next"></div> <div class="slideshow-controls"> <div class="slideshow-resume"></div> <div class="slideshow-pause"></div> </div> <img src="1.jpg" title="caption1" /> <img src="2.jpg" title="caption2" /> <img src="3.jpg" title="caption3" /> <img src="4.jpg" title="caption4" /> <img src="5.jpg" title="caption5" /> <img src="6.jpg" title="caption6" /> <div class="slideshow-caption"></div> </div>
5. Initialize the slideshow and done. Available parameters:
- el: slideshow selector
- speed: animation speed
- controls: shows controls
- captions: shows captions
phSlideShow.slideshowInit( ".slideshow", 3000, true, true );
This awesome jQuery plugin is developed by phphq. For more Advanced Usages, please check the demo page or visit the official website.