Carrusel/scroller para dispositivos móviles en Pure JS-Glider. js

Vista prévia

Descripción

Glider. js es un plugin de JavaScript ligero pero potente para crear carruseles/desplazadores táctiles interactivos y accesibles para la Web.

Más características

• Se desplaza a través de elementos con efecto de desplazamiento Momentum.
• Controles de navegación personalizados.
• Totalmente accesible.
• Permite varios elementos en la misma diapositiva.
• Soporta diapositivas fraccionales.
• Le permite agregar o quitar elementos dinámicamente mediante JS.
• Funciones de aceleración.
• API útil.

Funcionamiento

Descargue e importe los archivos del plugin de Glider en el documento.

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

Inserte sus propias diapositivas en el recipiente del planeador.

<div class="glider">

<div> Slide 1 </div>

<div> Slide 2 </div>

<div> Slide 3 </div>

<div> Slide 4 </div>

<div> Slide 5 </div>

...
</div>

Crea un nuevo planeador con opciones predeterminadas.

new Glider(document.querySelector('.glider'));

Añade flechas de navegación y viñetas de paginación al planeador.

<div id="dots"></div>
<a class="glider-prev">&laquo;</a>
<a class="glider-next">&raquo;</a>

new Glider(document.querySelector('.glider'),{


dots: '#dots',


arrows: {



prev: '.glider-prev',



next: '.glider-next'


}
});

Especifique el número de diapositivas que desea desplazar a la vez.

new Glider(document.querySelector('.glider'),{


slidesToScroll: 1
});

Especifique el número de diapositivas que se mostrarán a la vez.

new Glider(document.querySelector('.glider'),{


slidesToShow: 1
});

Establezca el ancho del elemento.

new Glider(document.querySelector('.glider'),{


itemWidth: 150
});

Establezca la duración de la animación.

new Glider(document.querySelector('.glider'),{


duration: .5
});

Habilite la funcionalidad arrastrable.

new Glider(document.querySelector('.glider'),{


// allow mouse dragging


draggable: false,


// how much to scroll with each mouse delta


dragVelocity: 3.3,
});

Habilite la funcionalidad de bloqueo de desplazamiento.

new Glider(document.querySelector('.glider'),{


// Force centering slide after scroll event


scrollLock: false,


// how long to wait after scroll event before locking


// if too low, it might interrupt normal scrolling


scrollLockDelay: 150,
});

Personalice la función de aceleración.

new Glider(document.querySelector('.glider'),{


easing: function (x, t, b, c, d) {



return c*(t/=d)*t + b;


}
});

Personaliza el planeador cuando se ejecuta en diferentes dispositivos:

new Glider(document.querySelector('.glider'),{


responsive: [{




breakpoint: 820,




settings: {







slidesToScroll: 4,






slidesToShow: 4,






dots: false,






arrows: false




}


},


{




breakpoint: 800,




settings: {






slidesToScroll: 3,






slidesToShow: 4




}


},


{




breakpoint: 775,




settings: {







slidesToScroll: 3,






slidesToShow: 3,






dots: false,






arrows: false




}


},


{




breakpoint: 750,




settings: {







slidesToScroll: 3,






slidesToShow: 3




}


},{




breakpoint: 725,




settings: {







slidesToScroll: 1,






slidesToShow: 2,






dots: false,






arrows: false




}


},


{




breakpoint: 700,




settings: {







slidesToScroll: 1,






slidesToShow: 1,






arrows: false




}


}]
});

API methods.

// update options
glider.setOption({

// options here
});

// refresh the plugin
glider.refresh(true);

// update controls
glider.updateControls

// remove an item
glider.removeItem(2);

// scroll to item 2
glider.scrollTo(2);

// scroll to a specific slide
glider.scrollItem(2);

// destroy the plugin
glider.destroy();

Event handlers available.

document.querySelector('.glider').addEventListener('glider-loaded', function(event){

// when loaded
});

document.querySelector('.glider').addEventListener('glider-refresh', function(event){

// when refreshed
});

document.querySelector('.glider').addEventListener('glider-animated', function(event){

// when animation completed
});

document.querySelector('.glider').addEventListener('glider-add', function(event){

// after an item added
});

document.querySelector('.glider').addEventListener('glider-remove', function(event){

// after an item removed
});

document.querySelector('.glider').addEventListener('glider-slide-hidden', function(event){

// when a slide is hidden
});

document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){

// when a slide is shown
});

document.querySelector('.glider').addEventListener('glider-destroy', function(event){

// after destroy
});

Registro de cambios

11/18/2018

• Accesibilidad completa del teclado

11/15/2018

• Proporcionar la opción de establecer siempre la configuración global en setOption

11/13/2018

• Cambie el nombre de función de emisor de eventos

11/11/2018

• Fix setOption bug
• Ajustes CSS