Mobile-first Swiper In Vanilla JavaScript – vanillaSwiper

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

How to use it:

Import the vanillaSwiper’s JavaScript and Stylesheet into the document.

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

Initialize the swiper and we’re ready to go.

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>

That’s it.  You can specify the star slide with the data-swipe-start 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" data-swipe-start></div></div>
  <div class="item"><div class="inner"></div></div>
  <div class="item"><div class="inner"></div></div>
  ...
</div>

Specify the maximum width of the swiper using the data-swipe-maxwidth attribute.

<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>

Specify the space between slides using the data-swipe-spacing attribute.

<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>

You can also customize the swiper by passing the options object to the vanillaSwiper.

{
  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
};