Touch-enabled Image Slider Plugin – VibeCarousel

Preview:

Description:

A responsive, mobile-friendly, easy-to-implement image slider carousel that supports both mouse drag and touch swipe gestures.

The plugin was designed to perform well on all devices and browsers with no dependencies and a small footprint.

How to use it:

1. Import the VibeCarousel’s JavaScript and Stylesheet.

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

2. Add images and next/prev buttons to the slider.

<div class="main-carousel" id="main-carousel">
  <div class="items" id="items">
    <div class="item" id="item">
      <img
        src="images/sample.jpg"
        width="100%"
        height="100%"
        alt="sample image"
      />
    </div>
    <div class="item" id="item">
      <img
        src="images/sample.jpg"
        width="100%"
        height="100%"
        alt="sample image"
      />
    </div>
    <div class="item" id="item">
      <img
        src="images/sample.jpg"
        width="100%"
        height="100%"
        alt="sample image"
      />
    </div>
    <div class="item" id="item">
      <img
        src="images/sample.jpg"
        width="100%"
        height="100%"
        alt="sample image"
      />
    </div>
  </div>
  <div class="btn next" id="next">
    Next
  </div>
  <div class="btn prev" id="prev">
    Prev
  </div>
</div>