jQuery Plugin To Create Mobile-friendly HTML Presentations - WebSlides

jQuery Plugin To Create Mobile-friendly HTML Presentations - WebSlides
File Size: 444 KB
Views Total: 2905
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

WebSlides is an excellent jQuery based presentation tool for creating responsive, fast, professional, touch-enabled, highly customizable, Keynote or PowerPoint like HTML5 presentaions, page sliders, landings, and portfolios and other step-based applications with ease.

Key features:

  • Made using plain HTML, CSS and JavaScript.
  • Keyboard navigation with arrow keys.
  • Goto a specific slide using URL hashtag.
  • Slider counter with current/total number.
  • 40+ beautiful components.
  • Auto-fill and equal height.
  • Fade transitions between slides.
  • Vertical or horizontal sliding.
  • 500+ SVG icons.

How to use it:

1. Place the following CSS files into the head section of the html document.

<!-- CSS Base -->
<link rel="stylesheet"href="base.css">

<!-- CSS Colors -->
<link rel="stylesheet"href="colors.css">

<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet"href="svg-icons.css">

2. Place jQuery plugin and the main JavaScript file webslides.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="webslides.js"></script>

3. Create presentation slides following the markup structure like this:

<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h2>Slide 1</h2>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>Slide 2</h2>
    </div>
  </section>
  ...
</article>

4. Create presentation slides following the markup structure like this:

<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h2>Slide 1</h2>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>Slide 2</h2>
    </div>
  </section>
  ...
</article>

Change log:

2017-01-14

  • Prevent bounce scroll

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