Vertical One Page Scroll Plugin With JavaScript – Cachu Slider

Category: Javascript , Slider | December 27, 2018
Author:mystroken
Views Total:10,655 views
Official Page:Go to website
Last Update:December 27, 2018
License:MIT

Preview:

Vertical One Page Scroll Plugin With JavaScript – Cachu Slider

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)

You Might Be Interested In:


One thought on “Vertical One Page Scroll Plugin With JavaScript – Cachu Slider

  1. Malika

    Hi!
    Do you have solution to add a scrollspy (title of section near the point at the right)?
    Thanks in advance!

    Reply

Leave a Reply