Mobile-friendly Fullscreen Slider With Snap scrolling - snapslide

snapslide is a small and mobile-friendly jQuery plugin to create a fullscreen page slider or one page scroll webpage that enables the user to move between slides via mouse wheel or touch swipe events.

The plugin takes advantage of CSS Scroll Snap to make the page automatically snap to the next or previous page while scrolling down or up the document.

How to use it:

1. To use this plugin, include the snapslide plugin and other required resources on the page.

<link rel="stylesheet" href="/path/to/dist/snapslide.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/snapslide-min.js"></script>

2. Add sections to the page slider.

<div class="snap-container">
  <section>
    <h2>Section 1</h2>
  </section>
  <section>
    <h2>Section 2</h2>
  </section>
  <section>
    <h2>Section 3</h2>
  </section>
</div>

3. Create a vertical pagination to indicate on which page you're viewing.

<ul class="nav-dots">
  <li data-slide-link="0"></li>
  <li data-slide-link="1"></li>
  <li data-slide-link="2"></li>
</ul>

4. Override the default styles of the section.

.snap-container section::before {
  /* sample graphic */
  background-image: url("https://images.pexels.com/photos/355952/pexels-photo-355952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: opacity 2s ease;
  -moz-transition: opacity 2s ease;
  -ms-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
  opacity: 0.25;
  z-index: -1; 
}

---

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