Author: | koga73 |
---|---|
Views Total: | 4,092 views |
Official Page: | Go to website |
Last Update: | June 15, 2020 |
License: | MIT |
Preview:

Description:
style-swiper is a Vanilla JavaScript slider/scroller/swiper library that allows the mobile users to scroll through a group of slides with touch swipe events.
Also provides navigation arrows and pagination bullets for desktop users to switch between slides by click.
How to use it:
1. Load the required stylesheet and JavaScript in the document.
<link rel="stylesheet" href="css/style-swiper.css" /> <script src="js/style-swiper.js"></script>
2. Add slides together with OPTIONAL pagination & navigation controls to the page.
<!-- Required: Container --> <div id="myStyleSwiper" class="style-swiper-container"> <!-- Optional: This div just lets the buttons vertically center with the slides minus the pagination --> <div class="style-swiper-slide-btn-wrap"> <!-- Optional: Previous button --> <button class="style-swiper-btn-prev" title="scroll previous"> <i class="fa fa-chevron-left"><!-- FontAwesome Icon--></i> </button> <!-- Required: Slides --> <div class="style-swiper-slides hide-scrollbar"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> </div> <!-- Optional: Next button --> <button class="style-swiper-btn-next" title="scroll next"> <i class="fa fa-chevron-right"><!-- FontAwesome Icon--></i> </button> </div> <!-- Optional: Pagination --> <div class="style-swiper-pagination-wrap"> <ol class="style-swiper-pagination"></ol> </div> </div>
3. Initialize the style swiper library and done.
var styleSwiper = new StyleSwiper({ el:document.getElementById("myStyleSwiper") });
Changelog:
06/15/2020
- added events to style swiper