Lightweight Bootstrap 5 Card Slider – AvalynxCardSlider

AvalynxCardSlider is a vanilla JavaScript card slider that converts any Bootstrap 5 grid row into a navigable, horizontally scrolling card track.

It supports Bootstrap’s native column classes directly, so your existing col-md-6 and col-lg-4 breakpoints drive the layout at every viewport size.

Features:

• Works directly with Bootstrap column classes such as col-12, col-md-6, col-lg-4, and col-xl-3.
• The single mode advances the track by exactly one card column per navigation click.
• The page mode calculates the number of currently visible columns and advances by that full count in one click.
• Auto-generates clickable dot buttons inside any container element you specify by ID.
• When the last page holds fewer cards than the visible column count, the slider appends invisible placeholder columns to keep the grid row visually uniform.
• Automatic Prev/Next button binding.
• A setTimeout-based debounce on the resize event re-calculates visible column counts, rebuilds placeholders, and redraws dots.

Use Cases:

• E-commerce product carousels
• Testimonial sections
• Blog post highlights

How to use it:

1. Load the latest Bootstrap framework first, then add the slider’s CSS and JS files.

<!-- Load Bootstrap -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Load the slider CSS and JS via CDN -->
<link href="/dist/css/avalynx-cardslider.css" rel="stylesheet">
<script src="/dist/js/avalynx-cardslider.js"></script>

2. Or install & import AvalynxCardSlider with NPM.

# NPM
$ npm install avalynx-cardslider

// Import the slider class
import { AvalynxCardSlider } from 'avalynx-cardslider';

// Import the required stylesheet
import 'avalynx-cardslider/dist/css/avalynx-cardslider.css';

3. Build the HTML Structure.The card slider targets the .row element by its id. Place your card columns inside the row using any Bootstrap breakpoint classes. The avalynx-cardslider-wrapper div is optional. The slider auto-creates it if it finds a bare container around the track.

<div class="container">
  <!-- The wrapper is optional; the slider injects it automatically if missing -->
  <div class="avalynx-cardslider-wrapper">
    <!-- Give the row an ID — this is the trackId you pass to the constructor -->
    <div class="row" id="teamGrid">
      <!-- Each column holds one card; use any Bootstrap breakpoint combination -->
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Alex Rivera</h5>
            <p class="card-text">Lead Frontend Engineer</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Jordan Chen</h5>
            <p class="card-text">UX Designer</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Morgan Blake</h5>
            <p class="card-text">Backend Architect</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Taylor Kim</h5>
            <p class="card-text">DevOps Engineer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Navigation buttons — position them anywhere on the page -->
  <div class="mt-3 text-center">
    <button id="teamPrev" class="btn btn-outline-secondary">← Back</button>
    <button id="teamNext" class="btn btn-primary">Next →</button>
  </div>
  <!-- Pagination dots container — the slider populates this automatically -->
  <div id="teamDots" class="mt-3 text-center"></div>
</div>

4. Initialize the Slider:

// Initialize with single-card navigation
new AvalynxCardSlider('teamGrid', {
  scrollMode: 'single',   // Advance one card column per click
  prevBtnId: 'teamPrev',  // ID of the back button element
  nextBtnId: 'teamNext',  // ID of the forward button element
  dotsId: 'teamDots'      // ID of the pagination dots container
});


// Initialize with full-page navigation
new AvalynxCardSlider('teamGrid', {
  scrollMode: 'page',    // Advance by all currently visible columns at once
  prevBtnId: 'teamPrev',
  nextBtnId: 'teamNext',
  dotsId: 'teamDots'
});

// Instantiate the slider with no buttons or dots attached
new AvalynxCardSlider('teamGrid');

// Multiple independent sliders on one page:**
// Each constructor call creates a fully isolated instance. Pass unique IDs for each slider's track, buttons, and dots container.

// First slider — product cards, page mode
new AvalynxCardSlider('productGrid', {
  scrollMode: 'page',
  prevBtnId: 'productPrev',
  nextBtnId: 'productNext',
  dotsId: 'productDots'
});

// Second slider — article previews, single mode
new AvalynxCardSlider('articleGrid', {
  scrollMode: 'single',
  prevBtnId: 'articlePrev',
  nextBtnId: 'articleNext',
  dotsId: 'articleDots'
});

5. All configuration options.

• trackId (string, required): The id attribute of the .row element that holds the card columns. The slider exits silently if it cannot find this element in the DOM.
• scrollMode (string): Sets the scrolling behavior. 'single' moves the track by one column per click. 'page' moves by the number of currently visible columns. Defaults to 'single'. Any value other than 'single' or 'page' falls back to 'single'.
• prevBtnId (string): The id of the “previous” button. The slider attaches a click listener to this element and disables it when the track sits at position zero. Defaults to null.
• nextBtnId (string): The id of the “next” button. The slider disables this button when the track reaches the last possible position. Defaults to null.
• dotsId (string): The id of the container where the slider renders pagination dot buttons. The slider clears and rebuilds this container after every resize event. Defaults to null.

new AvalynxCardSlider('productGrid', {
  scrollMode: 'single',
  prevBtnId: null,
  nextBtnId: null,
  dotsId: null,
});

FAQs:

Q: Does AvalynxCardSlider work with Bootstrap 4?
A: No. The slider targets Bootstrap 5.3 or newer.

Q: What happens if I have 7 cards and page mode shows 3 columns?
A: The syncPagePlaceholders() method calculates that 3 does not divide evenly into 7 and appends 2 invisible placeholder columns, bringing the total to 9. The final page then shows 3 columns visually. The placeholders carry aria-hidden="true" so screen readers skip them entirely.

Q: My dot count looks wrong after I resize the browser window. What causes this?
A: This typically happens when the slider initializes before Bootstrap’s CSS finishes loading, so getBoundingClientRect().width returns zero for the first column. Wrap your initialization in a DOMContentLoaded listener and confirm Bootstrap’s stylesheet link appears before the slider’s script tag. After a valid resize event fires, the slider recalculates and redraws the dots correctly.

The post Lightweight Bootstrap 5 Card Slider – AvalynxCardSlider appeared first on CSS Script.