Basic Image Slideshow Plugin With jQuery - phSlideshowJS

Basic Image Slideshow Plugin With jQuery - phSlideshowJS
File Size: 11 KB
Views Total:
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.