Mobile-friendly Carousel Plugin For Bootstrap 5/4 - Silderable

Silderable is a responsive, touch-enabled, multi-item carousel plugin built with jQuery and Bootstrap 5/4. Can be useful for showcasing portfolios, product listings, or any content where sequential visibility adds value. 

It automatically cycles through carousel items at a set interval. You can also interact directly with the carousel through swipe gestures or traditional navigation buttons.

How to use it:

1. Include jQuery library, Bootstrap's stylesheet, and Silderable plugin's files in your HTML.

<!-- jQuery and Bootstrap is required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<!-- Silderable Plugin -->
<link rel="stylesheet" href="dist/css/sliderable.css">
<script src="dist/js/sliderable.js"></script>

2. Add your carousel items and the next/previous navigation buttons to the carousel container. Use the data-slide attribute to set the number of items to scroll horizontally at a time.

<div class="Sliderable" data-items="1,2,3,4" data-slide="1" id="Sliderable">
  <div class="Sliderable-inner">
    <div class="item">
      <div>
        Item 1
      </div>
    </div>
    <div class="item">
      <div>
        Item 1
      </div>
    </div>
    <div class="item">
      <div>
        Item 1
      </div>
    </div>
    ... More Item Here ...
  </div>
  <button class="btn btn-light btn-left">
    <img src="dist/img/left.svg" width="15px">
  </button>
  <button class="btn btn-light btn-right">
    <img src="dist/img/right.svg" width="15px">
  </button>
</div>

3. Configure the carousel with the following options:

var options = {

    // enable autoplay
    autoPlay: true,

    // autoplay interval in ms
    autoPlayInterval: 3000,

    // min swipe distance in px
    swipeThreshold: 50,
    
};

How it works:

• The plugin initializes by selecting the carousel container and its inner item wrapper.
• It calculates the appropriate item width based on the viewport size and the `data-items` attribute.
• Event listeners are set up for click events on the next/previous buttons, touch events for swiping, and window resize events for responsiveness.
• When a next/previous button is clicked or a swipe gesture is detected, the `click` function is called, which calculates the new translation value for the carousel items.
• The `ResCarousel` function applies the calculated translation value to the carousel items, creating a smooth sliding animation.
• If autoplay is enabled, the `setAutoplay` function is called, which sets up an interval to automatically cycle through the carousel items.
• The `clearAutoplay` function is used to clear any existing autoplay intervals when user interaction occurs.
• The plugin also handles various edge cases, such as disabling the next/previous buttons when reaching the start or end of the carousel, and adjusting the carousel size on window resize.

Changelog:

2024-06-14

• Use parseFloat to handle decimal values

---

This awesome jQuery plugin is developed by Rayiumir. For more Advanced Usages, please check the demo page or visit the official website.