Móvil-primero Swiper en Vanilla JavaScript-vanillaSwiper

Vista prévia

Descripción

vanillaSwiper is a responsive, mobile-first swiper component that enables the user to scroll through a set of elements via touch swipe.

Funcionamiento

Importe el JavaScript y la hoja de estilos de vanillaSwiper al documento.

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

Inicializar el Swiper y estamos listos para ir.

vanillaSwiper.init();
Create a set of elements for the swiper and then insert them into a container element with the data-swipe-natural attribute.

<div class="items" data-swipe-natural>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

...
</div>

Eso es todo. Puede especificar la diapositiva de estrella con el atributo Data-swipe-Start .

<div class="items" data-swipe-natural>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner" data-swipe-start></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

...
</div>

Especifique el ancho máximo del Swiper utilizando el atributo Data-swipe-MaxWidth .

<div class="items"



data-swipe-natural


 data-swipe-maxwidth="640">

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner" data-swipe-start></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

...
</div>

Especifique el espacio entre las diapositivas utilizando el atributo Data-swipe-spacing.

<div class="items"



data-swipe-natural


 data-swipe-spacing='[{"width": "0", "spacing": "4"}, {"width": "520", "spacing": "8"}, {"width": "768", "spacing": "12"}]'>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner" data-swipe-start></div></div>

<div class="item"><div class="inner"></div></div>

<div class="item"><div class="inner"></div></div>

...
</div>

{

selector: '[data-swipe-natural]',

swiperContainerClass: 'swiper-container',

swiperWrapperClass: 'swiper-wrapper',

swiperPrevClass: 'swiper-prev',

swiperEnabledClass: 'swiper-enabled',

swiperPrevContent: '<span class="swiper-prev__content">Previous</span>',

swiperNextClass: 'swiper-next',

swiperNextContent: '<span class="swiper-next__content">Next</span>',

hiddenClass: 'is-hidden',

animationSpeed: 500,

disabledButtonClass: 'is-disabled',

spacing: 8,

visiblePortion: 8.5,

defaultMaxWidth: 320
};