Móvil-primer deslizador horizontal con JavaScript puro-Slim-Slider

Vista prévia

Descripción

Slim-Slider es un plugin de slider sensible al tacto diseñado principalmente para páginas web móviles.

Características

• Admite eventos de arrastrar y deslizar el mouse. (Basado en Hammer. js).
• Velocidad y dirección de animación configurables.
• Botones de navegación y viñetas de paginación.

Instalación

# Yarn
yarn add slim-slider

# NPM
$ npm install slim-slider

Funcionamiento

Importe la hoja de estilos principal y el archivo JavaScript en el documento.

<link rel="stylesheet" href="main.css">
<script src="build.js"></script>

Inserte sus propias imágenes en el deslizador delgado.

<div class="slim-slider">

<div class="slim-slides">


<div class="slim-slide">



<img src="1.jpg">


</div>


<div class="slim-slide">



<img src="2.jpg">


</div>


<div class="slim-slide">



<img src="3.jpg">


</div>

</div>
</div>

Inicialice el control deslizante mediante la creación de un nuevo objeto SlimSlider como este:

let Slider = new SlimSlider()

Config el deslizador Slim por pasar las siguientes opciones a la Slimslider () .

let Slider = new SlimSlider({



// transition delay between slides


timing : 400,



// selector of child slides


childsClassName : '.slim-slide',



// 'rtl' or 'ltr'


dir: 'ltr',



 // refer to hammerjs docs


threshold: 10,



 // show/hide navigation buttons


showButtons:false,



// infinite looping


infinite:false,



 // show/hide pagination bullets


showPointers : true,



// show/hide thumbnails


showThumbnails:true,



// enable/disable autoplay


autoPlay: false,



// autoplay interval

autoPlayTimer: 3000,



// how many items per slide


itemsPerSlide : 1



})

Navegue entre diapositivas manualmente.

Slider.goToNext()
Slider.goToPrevious()

Ejecute una función cuando la diapositiva cambie.

Slider.addEventListener('after.slim.slide', (e) =>
{

console.log(e)
 });

Registro de cambios

09/22/2018

• v1.3.1: Added more options & API.