Easy Customizable Presentation Framework With jQuery - scroll-js

scroll-js is a simple, lightweight, easy-to-customize jQuery presentation framework that enables you to navigate between sectioned slides with Page Up/Page Down keys.

How to use it:

1. Add custom slides to the presentation.

<div class="slide first-slide" id="first-slide">
  <p class="title">Presentation Title</p>
</div>
<div class="slide" id="slide-1">
  <p class="large">Slide 1</p>
</div>
<div class="slide" id="slide-2">
  <p class="large">Slide 2</p>
</div>
<div class="slide" id="slide-3">
  <p class="large">Slide 3</p>
</div>
...

2. Insert jQuery JavaScript library and the scroll.js into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 
        crossorigin="anonymous">
</script>
<script src="scroll.js"></script>

3. Initialize the plugin to activate the presentation and specify an array of slides to show.

$(document).ready(function() {
  scroll({
    slides: [
      'slide-1',
      'slide-2',
      'slide-3',
      ...
    ],
  });
});

4. Set the transition effect when switching between slides.

$(document).ready(function() {
  scroll({
    slides: [
      'slide-1',
      'slide-2',
      'slide-3',
      ...
    ],
    transition: 'slide' // or 'fade'
  });
});

5. Apply you own CSS styles to the presentation.

.slide {
  display: block;
  width: 80%;
  ...
}

---

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