Mobile-first JavcaScript Slider Library – VibeSwiper

Preview:

Description:

Vibeswiper is a lightweight, high performance, mobile-first JavaScript slider (swiper) library for the web.

It supports touch swipe events on mobile devices and also works with mouse drag events on desktops.

How to use it:

1. Download and load the VibeSwiper’s files in the HTML file.

<link rel="stylesheet" href="styles/vibeSwiper.css" />
<script src="scripts/vibeSwiper.js"></script>

2. The required HTML structure for the swiper.

<div class="main-swiper" id="main-swiper">
  <!-- Swiper Items -->
  <div class="items" id="items">
    <div class="item" id="item">
      <img class="item-img" src="1.png" alt="category" />
      <div class="item-circle"></div>
      <p class="item-text">item 1</p>
    </div>
    <div class="item" id="item">
      <img class="item-img" src="2.png" alt="category" />
      <div class="item-circle"></div>
      <p class="item-text">item 2</p>
    </div>
    <div class="item" id="item">
      <img class="item-img" src="3.png" alt="category" />
      <div class="item-circle"></div>
      <p class="item-text">item 3</p>
    </div>
  </div>
  <!-- Prev/Next Buttons -->
  <div class="btn next" id="next">
    <button>Next</button>
  </div>
  <div class="btn prev" id="prev">
    <button>Previus</button>
  </div>
</div>