Author: | mystroken |
---|---|
Views Total: | 10,655 views |
Official Page: | Go to website |
Last Update: | December 27, 2018 |
License: | MIT |
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)
Hi!
Do you have solution to add a scrollspy (title of section near the point at the right)?
Thanks in advance!