Create A Basic Scrolling Website With Sections Slider

Sections Slider is a basic jQuery one page scroll plugin to create a basic scrolling webpage where the users can navigate between sections with mouse wheel.

It also comes with a Scroll Snapping functionality that automatically scrolls the page and snaps to the next/prev sections while scrolling.

How to use it:

1. Add sectioned pages to the scrolling website.

<div id="section0" class="section">
  Page 1
</div>

<div id="section1" class="section">
  Page 2
</div>

<div id="section2" class="section">
  Page 3
</div>

<div id="section3" class="section">
  Page 4
</div>

<div id="section4" class="section">
  Page 5
</div>

2. Load the Sections Slider's script after the latest jQuery JavaScript library and done.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/main.js"></script>

3. Apply your own CSS styles to the sectioned pages.

.section {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 120%;
  font-weight: 800;
  position: relative;
}

#section0 {
  height: 60vh;
  background: #00b9ae;
}

#section1 {
  height: 100vh;
  background: #6699cc;
}

#section2 {
  height: 150vh;
  background: #ff8c42;
}

#section3 {
  height: 60vh;
  background: #ff3c38;
}

#section4 {
  height: 100vh;
  background: #a23e48;
}

---

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