JavaScript Fullscreen Slider

Using javascript create a fullscreen slider . This asset controls sections in a HTML page.That one resizing sections to fullscreen resolution and moves these individually by wheel/touch events.

Usage

Add Css in head


<link rel="preload" as="style" href="/fullscreen-slider/css/main.min.css" onload="this.onload=null;this.rel='stylesheet'">

Insert the below html code to body


<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>

Js Code in footer



<script src="/fullscreen-slider/js/main.min.js" async></script>

Demo Download Read More