Sensible táctil deslizante en Vanilla JavaScript-swipe. js

Vista prévia

Descripción

Swipe. js es un plugin de JavaScript puro de vainilla que se utiliza para crear una respuesta multiplataforma que admita cualquier contenido web y que tenga muchas opciones & Api. También se puede implementar como un componente para AngularJS y ReactJS.

Más características

• Efectos de transición suaves basados en las transformaciones CSS3.
• Velocidad de animación personalizada.
• Deslizamiento continuo.
• Admite eventos de arrastrar y tocar.
• Callbacks.
• Autoplay.

Funcionamiento

Incluya el script swipe. js en el documento y el control deslizante está listo para su uso.

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

Cree un grupo de contenido de diapositiva como este:

<div id="mySwipe" class="swipe">

<div class="swipe-wrap">


<div><b>0</b></div>


<div><b>1</b></div>


<div><b>2</b></div>


<div><b>3</b></div>


...

</div>
</div>

Cree los botones de navegación anterior/siguiente para el control deslizante.

<a class="btn btn-primary" id="prev">Prev</a>
<a class="btn btn-primary" id="next">Next</a>

Inicialice el control deslizante con las opciones predeterminadas.

var element = document.getElementById('mySwipe'),


prevBtn = document.getElementById('prev'),


nextBtn = document.getElementById('next');

window.mySwipe = new Swipe(element, {

// options here
});

Los estilos CSS requeridos para el deslizador.

.swipe {

overflow: hidden;

visibility: hidden;

position: relative;
}

.swipe-wrap {

overflow: hidden;

position: relative;
}

.swipe-wrap > div {

float: left;

width: 100%;

position: relative;
}

Personalice el control deslizante con las siguientes opciones.

window.mySwipe = new Swipe(element, {

startSlide: 0,

speed: 400,

auto: 3000,

draggable: false,

continuous: true,

autoRestart: false,

disableScroll: false, // prevent touch events from scrolling the page

stopPropagation: false,

 callback: function(index, elem, dir) {},

transitionEnd: function(index, elem) {}
});

Api.

// slide to the previous slide.
mySwipe.prev()

 // slide to the next slide.
mySwipe.next()

 // return the current slide index position.
mySwipe.getPos()

// return the number of slides.
mySwipe.getNumSlides()

 // slide to the position matching the index (integer) (duration: speed of transition in milliseconds).
mySwipe.slide(index, duration):

 // restart the slider with autoplay.
mySwipe.restart()

// stop the slider and disable autoplay.
mySwipe.stop()

// reinitialize swipe.
mySwipe.setup(options)

// enable swipe.
mySwipe.enable()

// disable swipe
mySwipe.disable()

// completely remove the Swipe instance.
mySwipe.kill()

Registro de cambios

v2.2.11 (09/19/2018)

• Se han añadido más opciones & métodos