Vertical One Page Scroll Plugin With JavaScript – Cachu Slider

Preview:

Description:

Cachu Slider is a robust JavaScript page slider plugin that helps you create a fully responsive one page scrolling website or single page webapp with ease.

The plugin enables the user to smoothly scroll through your pages with mouse wheel or by clicking the vertical navigation buttons.

How to use it:

Load the stylesheet ‘cachu-slider.css’ in the head, and the JavaScript ‘cachu-slider.js’ at the bottom of the page.

<link href="dist/cachu-slider.css" rel="stylesheet">
<script src="dist/cachu-slider.js"></script>

Add page sections into a container element with the CSS class of ‘cachu__container’ as these:

<div class="cachu__container">
  <div class="cachu__sections">
    <section class="cachu__section">Section 1</section>
    <section class="cachu__section">Section 2</section>
    <section class="cachu__section">Section 3</section>
    ...
  </div>
</div>

Create a new Cachu Slider instance with default options.

let slider = new  Cachu(document.querySelector('.cachu__container'));

Activate the Cachu Slider.

slider.run();

Possible options to customize the Cachu Slider.

let slider = new  Cachu(document.querySelector('.cachu__container'),{
    // disable mousewheel interactions
    disableMouseEvents: false,
    // animation speed in milliseconds
    scrollingSpeed: 1000,
    // infinite loop
    scrollingLoop: true,
    // or 'horizontal'
    scrollingDirection: 'vertical',
    // enable side navigation
    navigationEnabled: true,
    // navigation position
    // or 'top', 'bottom', 'left'
    navigationPosition: 'right'
});

Changelog:

v0.8.0 (12/27/2018)

• Remove Hamsterjs – Custom scroll event handler + lethargy

v0.8.0 (07/04/2018)

• Fix: stop hiding tooltip on cachu-nav top & bottom

v0.6.0 (06/30/2018)

• Implemented scrollingDirection (vertical & horizontal)