Página versátil/contenido Slider componente con JavaScript-DoSlide

Vista prévia

Descripción

DoSlide es una biblioteca JavaScript simple pero robusta y amigable para móviles para deslizarse o desvanecerse a través de un conjunto de contenido HTML con el desplazamiento del ratón o la interacción de deslizamiento táctil. Ideal para crear un sitio web de desplazamiento de una página o un deslizador/presentación de imágenes genérico.

¿Cómo funciona?

Descargue e incluya la versión minimizada de DoSlide en la página HTML.

<script src="dist/do-slide.min.js"></script>

Crear un conjunto de secciones de contenido de pantalla completa para crear un sitio web de desplazamiento de una sola página como un control deslizante de página.

<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>

Los estilos CSS básicos.

.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
}

Inicializar el control deslizante de página.

var slide = new DoSlide('.container')

Opciones de configuración predeterminadas.

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



})

Configuraciones de inicialización predeterminadas.

// 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