Fullscreen Image Slider/Slideshow Plugin - jQuery ppt.js

Fullscreen Image Slider/Slideshow Plugin - jQuery ppt.js
File Size: 105 KB
Views Total: 5168
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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" 
<script src="js/ppt.js"></script>

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

  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.

  width: 600,
  height: 450,

7. Set the active slides on page load.

  activeIndex: 0

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