Author: | perfectwebteam |
---|---|
Views Total: | 1,087 views |
Official Page: | Go to website |
Last Update: | June 26, 2018 |
License: | MIT |
Preview:

Description:
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 };