Easy HTML Presentations – WebSlides

HTML Presentations-WebSlides
File Size:662.64 KB
Views Total:231
Last Update:January 20, 2018
Publish Date:January 6, 2018
Official Website:Go to website
License:MIT

With the help of the webslides there comes the easy HTML presentations that helps the work to be done in the easyway. The inclusions of the websites and lovely CSS as it is in the each parent section there is an individual side of the slideshow presentation. It helps to share presentations slider in HTML. In this one there is no need of any overuses or the nesting. HTML presentation has never been any rewarding before it. AS in this one we can create 120+ premium slides that are already ready to use well.

Mobile-friendly HTML Presentations: WebSlides

The webslides is the best jQuery kind of presentation tool that is used for the responsive, good for the customization, speedy, along with the keynotes, landing pages and the all other step-based applications with the ease. It helps to share stories slideshow.

Characterstics:

  • It is made with the plain HTML, CSS and JavaScript.
  • It has keyboard navigation with arrow keys.
  • It goes to a specific slide using URL hashtag.
  • It has slider counter with current/total number.
  • It includes 40+ beautiful components.

How to use :

1. Add 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.  Add jQuery plugin and the main JavaScript file webslides.js : 

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

3. Add presentation slides following the HTMLstructure 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>

Done