Author: | MopTym |
---|---|
Views Total: | 396 views |
Official Page: | Go to website |
Last Update: | January 28, 2016 |
License: | MIT |
Preview:

Description:
DoSlide is a simple yet robust and mobile-friendly JavaScript library for sliding or fading through a set of html content with mouse scroll or touch swipe interaction. Great for creating one page scrolling website or generic image slider / slideshow.
Basic usage:
Download and include the minified version of DoSlide on the html page.
<script src="dist/do-slide.min.js"></script>
Create a set of fullscreen content sections to build a single page scrolling website like a page slider.
<div class="wrap ds-parent"> <div class="ds-container container"> <div class="section"> <span class="arrow down"></span> </div> <div class="section"> <span class="arrow down"></span> <span class="arrow up"></span> </div> <div class="section"> <span class="arrow down"></span> <span class="arrow up"></span> </div> <div class="section"> <span class="arrow up"></span> </div> </div> </div>
The basic CSS styles.
.ds-parent { margin: 0; padding: 0; overflow: hidden } .ds-container { position: absolute; width: 100%; height: 100%; overflow: hidden } .ds-container>* { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden }
Initialize the page slider.
var slide = new DoSlide('.container')
Default configuration options.
var slide = new DoSlide('.container',{ // duration in ms duration: 1000, // easing function timingFunction: 'ease', // min interval in ms minInterval: 50, // use CSS translate3d translate3d: true, // parent object parent: null, // respond to user event respondToUserEvent: true, // stop event propagation stopPropagation: false })
Default init configs.
// Index of section to be activated on initialization. initIndex : 0, // CSS classes initClass : 'ds-init', activeClass : 'active', transitionInClass : 'transition-in', transitionOutClass : 'transition-out', // the actions of DoSlide object will be pure logic with no affect to HTML silent : 0, // horizontal layout horizontal : false, // infinite loop infinite : false, // enable mouse wheel listenUserMouseWheel : true, // enable touch swipe listenUserSwipe : true, // User event element selector eventElemSelector : null