Carrusel de imágenes para dispositivos móviles en Vanilla JavaScript-CrystalSlider. js

Vista prévia

Descripción

CrystalSlider. js un plugin de JavaScript de vainilla independiente que le permite crear un deslizador/carrusel de imagen adaptable, táctil y de fácil de usar para sus aplicaciones Web.

Install the CrystalSlider via NPM:

# NPM
$ npm install CrystalSlider

Funcionamiento

Inserte los archivos JavaScript y CSS de Crystal Slider en la Página Web.

<link rel="stylesheet" href="dist/crystalslider.min.css">
<script src="dist/crystalslider.min.js"></script>

Inserte sus imágenes junto con las descripciones en el carrusel.

<div class="crystal-slider">

<div data-crystal-title="Slide description">


<img src="1.jpg" alt="">

</div>

<div data-crystal-title="Slide description 2">


<img src="2.jpg" alt="">

</div>

<div data-crystal-title="Slide description 3">


<img src="3.jpg" alt="">

</div>

<div data-crystal-title="Slide description 4">


<img src="4.jpg" alt="">

</div>
</div>

Inicialice el carrusel creando un nuevo objeto CrystalSlider como este:

const crystalSlider = new CrystalSlider();

Métodos de la API:

const crystalSlider = new CrystalSlider();

// slides to the previous image
crystalSlider.prevSlide()

// slides to the next image
crystalSlider.nextSlide()

 // slides to a specified image
crystalSlider.goToSlide(index)

// returns true if the option is enable
 crystalSlider.isEnabledOption(option)

 // destroy the slider
crystalSlider.destroy()

 // re-init the slider
crystalSlider.reinit(options)

Opciones predeterminadas para personalizar el carrusel.

const crystalSlider = new CrystalSlider({



selector


 : `.${sliderCls}`,



activeSlide

: 1,



loop




 : true,



fade




 : false,



duration


 : 500,



draggable


: true,



adaptiveHeight : false,



threshold


: 30,



titles



 : false,



keyboard


 : false,



easing



 : 'ease-out',



// Nav



nav





: true,



navPrevVal

 : 'Prev',



navNextVal

 : 'Next',



// Pagination



pagination

 : false,



thumbnails

 : false,



zIndex



 : 98,



// Callbacks



onReady



: function () {},



beforeChange
 : function () {},



afterChange

: function () {},
});