jQuery Plugin To Create Mobile-friendly HTML Presentations - WebSlides

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 webslides. For more Advanced Usages, please check the demo page or visit the official website.