Mobile-first Slider/Scroller In JavaScript – style-swiper

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