Basic Image Slideshow Plugin With jQuery - phSlideshowJS

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.