Responsive Web Presentation Plugin For jQuery - sectionizr

sectionizr is a really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

How to use it:

1. Include the main stylesheet sectionizr.css in the header of the document.

<link rel="stylesheet" href="sectionizr.css">

2. Create the sectioned pages and controls for the presentation.

<div class="sectionizr">
  <div class="controls">
      <a class="prev" onclick="controlla1.prev()"></a>
      <a class="next" onclick="controlla1.next()"></a>
  </div>
  <section>Section 1</section>
  <section>Section 2</section>
  <section>Section 3</section>
  ...
</div>

3. The plugin also supports nested content sections.

<div class="sectionizr">
  <div class="controls">
      <a class="prev" onclick="controlla1.prev()"></a>
      <a class="next" onclick="controlla1.next()"></a>
  </div>
  <section>Section 1</section>
  <section>Section 2</section>
  <section class="sectionizr">
    <section>Section 3.1</section>
    <section>Section 3.2</section>
    <section>Section 3.3</section>
    <section>Section 3.4</section>

    <div class="controls">
      <a class="prev" onclick="controlla2.prev()"></a>
      <a class="next" onclick="controlla2.next()"></a>
    </div>
  </section>
  <section>Section 4</section>
</div>

4. To change the default scrolling direction:

<section class="sectionizr vertical">
  <section>Section 3.1</section>
  <section>Section 3.2</section>
  <section>Section 3.3</section>
  <section>Section 3.4</section>

  <div class="controls">
    <a class="prev" onclick="controlla2.prev()"></a>
    <a class="next" onclick="controlla2.next()"></a>
  </div>
</section>

5. Include jQuery library and the jQuery sectionizr plugin's script at the end of the document:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/sectionizr.min.js"></script>

6. Initialize the sectionizr, keep a reference to the objects returned:

let [controlla1, controlla2] = $('.sectionizr').sectionizr();

7. API methods.

// goto next slide
sectionizr.next()

// back to previous slide
sectionizr.prev()

// advance or reverse by x steps
sectionizr.step(x)

// goto x slide
sectionizr.go(x)

// goto first slide
sectionizr.first()

// goto last slide
sectionizr.last()

// if there's a next
sectionizr.hasNext()

// if there's a prev
sectionizr.hasPrev()

// refresh the sectionizr
ectionizr.refresh()

---

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