Author: | ykob |
---|---|
Views Total: | 968 views |
Official Page: | Go to website |
Last Update: | April 22, 2019 |
License: | MIT |
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>