Versatile Page / Content Slider Component With JavaScript – DoSlide

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