Easy deslizador horizontal/scroller en Vanilla JS-jScrolly

Vista prévia

Descripción

jScrolly es un plugin de JavaScript independiente que le permite la transición sin problemas entre un grupo de imágenes utilizando animaciones CSS3.

Funcionamiento

Instalación.

# NPM
$ npm install jscrolly --save

Importe la biblioteca jscrolly.

<script src="js/jScrolly.js"></script>

// or
import jScrolly from 'jScrolly';

No olvide importar la hoja de estilo del núcleo.

<link href="css/jScrolly.css" rel="stylesheet">

La estructura HTML básica para el control deslizante.

<div class="jScrolly">

<div class="jContent">


<div class="slider">



<div class="slide">Slide One</div>



<div class="slide">Slide Two</div>



<div class="slide">Slide Three</div>



<div class="slide">Slide Four</div>



<div class="slide">Slide Five</div>



...


</div>

</div>
</div>

Inicialice el jScrolly y listo.

var mySlider = new jScrolly();

Los selectores CSS predeterminados que se pueden utilizar para el estilo del deslizador & controles deslizantes en el CSS.

var mySlider = new jScrolly({


buttonsClass: 'jPanel',


buttonPrevClass: 'prevBtn',


buttonNextClass: 'nextBtn',


buttonNeactiveClass: 'neactive',


buttonPrevText: 'Previous',


buttonNextText: 'Next',
});

Configuración de la velocidad de transición en milisegundos. Valor predeterminado: 400.

var mySlider = new jScrolly({


transitionSpeed: '400'
});

Funciones de devolución de llamada.

var mySlider = new jScrolly({


onFirstSlide: null,


onSlide: null
});

Desplazarse entre las diapositivas manualmente.

mySlider.moveNext();

mySlider.movePrev();

Destruya la instancia.

mySlider.destroy();