Fullscreen Image Slider/Slideshow Plugin - jQuery ppt.js

ppt.js is a simple-to-use jQuery plugin to dynamically generate a Powerpoint-style slider/slideshow/presentation from an array of image objects defined in the JavaScript. The plugin supports the fullscreen mode which enables the user to play the slider/slideshow/presentation in full screen.

How to use it:

1. Include the stylesheet ppt.css in the head section of the html page.

<link rel="stylesheet" href="css/ppt.css">

2. Include the necessary iconic font for the icons.

<link rel="stylesheet" href="icon-font/style.css">

3. Create a container element in which you want to place the slider/slideshow/presentation.

<div class="example"></div>

4. Include the latest version of jQuery library and the ppt.js before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/ppt.js"></script>

5. Initialize the plugin and replace the default images(slides) with your owns.

$('.example').ppt({
  imageUrl: [{
    src: 'https://picsum.photos/1200/900?image=822'
  }, {
    src: 'https://picsum.photos/1200/900?image=823'
  }, {
    src: 'https://picsum.photos/1200/900?image=826'
  }, {
    src: 'https://picsum.photos/1200/900?image=821'
  }, {
    src: 'https://picsum.photos/1200/900?image=856'
  }, {
    src: 'https://picsum.photos/1200/900?image=863'
  }]
})

6. Specify the width/height of the slider/slideshow/presentation.

$('.example').ppt({
  width: 600,
  height: 450,
})

7. Set the active slides on page load.

$('.example').ppt({
  activeIndex: 0
})

---

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