Touch-friendly Fullscreen Slider In Pure JavaScript

Preview:

Description:

A responsive, mobile-friendly page slider which enables your visitor to transition between pages with mouse wheel or touch swipe events.

It also provides a side (desktop) or bottom (mobile) pagination control where you can transition the slider to a specific page by clicking/tapping the bullets.

How to use it:

Download and load the required resources in your html document.

<link rel="stylesheet" href="/fullscreen-slider/css/main.min.css">
<script src="/fullscreen-slider/js/main.min.js" async></script>

The HTML structure for the page slider.

<div class="l-page" data-page-id="index">
  <div class="p-global-header">
    <h1 class="p-global-title">FullScreen Slider</h1>
    <div class="p-global-links"><a href="https://github.com/ykob/fullscreen-slider">View Source on GitHub</a></div>
  </div>
  <div class="l-contents">
    <div class="p-sections-wrap js-fullscreen-wrap">
      <div class="p-section p-section--01 js-fullscreen-section">
        <div class="p-section__in">
          <h2 class="p-section__header">Section1</h2>
          <p class="p-section__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
      </div>
      <div class="p-section p-section--02 js-fullscreen-section">
        <div class="p-section__in">
          <h2 class="p-section__header">Section2</h2>
          <p class="p-section__text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br>Nulla consequat massa quis enim.</p>
        </div>
      </div>
      <div class="p-section p-section--03 js-fullscreen-section">
        <div class="p-section__in">
          <h2 class="p-section__header">Section3</h2>
          <p class="p-section__text">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.<br>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<br>Nullam dictum felis eu pede mollis pretium.</p>
        </div>
      </div>
      <div class="p-section p-section--04 js-fullscreen-section">
        <div class="p-section__in">
          <h2 class="p-section__header">Section4</h2>
          <p class="p-section__text">Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.<br>Aenean vulputate eleifend tellus.<br>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
        </div>
      </div>
      <div class="p-section p-section--05 js-fullscreen-section">
        <div class="p-section__in">
          <h2 class="p-section__header">Section5</h2>
          <p class="p-section__text">Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.<br>Phasellus viverra nulla ut metus varius laoreet.<br>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
        </div>
      </div>
    </div>
    <div class="p-pager js-fullscreen-pager">
      <div class="p-pager__in">
        <div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
        <div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
        <div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
        <div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
        <div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
        <div class="p-pager__bar"></div>
      </div>
    </div>
    <div class="p-background js-fullscreen-bg"></div>
  </div>
</div>