Ligero Swiper móvil en puro JavaScript-luz-Swiper

Vista prévia

Descripción

Una biblioteca de Swiper ligera y móvil que permite al visitante alternar entre las imágenes con los eventos de deslizamiento izquierdo/derecho.

Funcionamiento

Instalación.

# Yarn
$ yarn add light-swiper

# NPM
$ npm install light-swiper --save

Importa el Swiper de luz.

import Swiper from 'light-swiper'

La estructura HTML básica para el Swiper.

<div class="light-swiper" id="siwper-demo">

<div class="swiper-wrap">


<div class="swipe-item">



<div class="pic">




<img





src="1.jpg"




/>



</div>


</div>


<div class="swipe-item">



<div class="pic">




<img





src="2.jpg"




/>



</div>


</div>

</div>
</div>

Inicializar la biblioteca y listo.

const mySwiper = new lightSwiper(document.querySelector('#siwper-demo'))

El CSS de ejemplo para el Swiper.

.light-swiper {

overflow: hidden;

position: relative;

background: #f1f1f1;

padding: 10px 0;
}

.swiper-wrap {

overflow: hidden;

position: relative;
}

.swipe-item {

float: left;

width: 100%;

position: relative;
}

.pic {

display: block;

position: relative;

border-radius: 3px;

line-height: 0;

height: 250px;

margin: 0 10px;

overflow: hidden;
}

Posibles opciones de plugin para personalizar el Swiper.

new lightSwiper(document.querySelector('#siwper-demo'),{



// width


width: null,



// offset


offset: null,



// initial image


startSlide: 0



// animation speed


speed: 300



// autoplay interval


auto: null,



// infinite loop


continuous: false



// disable page scroll on swipe


disableScroll: false



// stop event propagation


stopPropagation : false



// callbacks


callback: function(index, currentEl) {},


transitionEnd: function(index, currentEl) {}



// start the transition based on how far you swipe the image


// from 0 to 1


swiping: null

})