Carrusel suave responsive en Vanilla JavaScript-JGB Slider

Vista prévia

Descripción

La biblioteca de JavaScript JGB Slider le permite crear una respuesta, personalizable, suavemente animado < a href = "https://wikicss.com/tag/carousel/" > Carousel para cualquier contenido Web.

Características

• Controles deslizantes personalizados.
• Bucle infinito.
• Controladores de eventos.
• Autoplay.

Install the JGB Slider with NPM:

# NPM
$ npm install jgb-slider --save

Funcionamiento

Importe el slider JGB en el proyecto o incluya el paquete UMB dentro de la Página Web de la siguiente manera:

<link href="dist/jgb-slider.css" rel="stylesheet">
<script src="dist/jgb-slider.js"></script>

La estructura HTML básica para el control deslizante.

<div class="js-slider">

<ol class="js-slider__slider">


<li class="js-slider__slide">




<img src="http://placehold.it/1200x350" />


</li>


<li class="js-slider__slide">




<img src="http://placehold.it/1200x350" />


</li>


<li class="js-slider__slide">




<img src="http://placehold.it/1200x350" />


</li>


<li class="js-slider__slide">




<img src="http://placehold.it/1200x350" />


</li>


<li class="js-slider__slide">




<img src="http://placehold.it/1200x350" />


</li>

</ol>
</div>

Inicializa la librería JBG Slider y listo.

var el = jgbslider();

Opciones de configuración con valores predeterminados.

var el = jgbslider({


currentSlide: 1,


numberOfSlides: 5,


transitionTo: undefined,


slideDuration: 1200,


autoplay: false,


autoplaySpeed: 4000,


loopThrough: false,


direction: undefined
});

API methods.

// Goto the next slide
el.next();

// Back to the previous slide
el.previous();

// Start autoplay
el.autoplay();

// Stop autoplay
el.stopAutoplay();

Controladores de eventos.

var el = jgbslider({


onInit: function onInit() {},


beforeSlide: function beforeSlide() {},


afterSlide: function afterSlide() {},


onStartAutoplay: function onStartAutoplay() {},


onStopAutoplay: function onStopAutoplay() {},
});