AvalynxCardSlider

AvalynxCardSlider is a lightweight, native JavaScript slider designed specifically for the Bootstrap grid system. It uses Bootstrap columns (version 5.3+) and slides smoothly either card by card or page by page. No framework dependencies such as jQuery or Swiper.

Features

• Native Bootstrap grid: Full compatibility with col-12, col-md-6, col-lg-4, etc. Responsive breakpoints work out of the box.
• Scroll modes: Choose between single (one card per click) or page (advance by full visible page width).
• Page mode placeholders: If the last page is incomplete, page mode automatically adds empty placeholders (e.g. 5 6 7 _) to keep the grid layout clean and consistent.
• Controls: Supports Next/Prev buttons and auto-generated pagination dots.
• Performance: Vanilla ES6, no dependencies, minimal CSS. Responsive via debounced window resize listener.

Examples

Here's a simple example of how to use AvalynxCardSlider in your project:

• Overview
• Simple cardslider (Single)
• Page cardslider (Page)
• Alignment examples (Button/Dot)
• Alignment examples (Button/Dot, Page)
• Complex card example

Installation

To use AvalynxCardSlider in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxCardSlider to work correctly.

First, include Bootstrap:

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Then, include AvalynxCardSlider:

<link href="path/to/avalynx-cardslider.css" rel="stylesheet">
<script src="path/to/avalynx-cardslider.js"></script>

Replace path/to/avalynx-cardslider.* with the actual path to the files in your project.

Installation via jsDelivr (Link)

AvalynxCardSlider is also available via jsDelivr. You can include it in your project like this:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/avalynx-cardslider.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/avalynx-cardslider.js"></script>

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxCardSlider displays correctly.

Installation via NPM (Link)

AvalynxCardSlider is also available as a npm package. You can add it to your project with the following command:

npm install avalynx-cardslider

After installing, you can import AvalynxCardSlider into your JavaScript file like this:

import { AvalynxCardSlider } from 'avalynx-cardslider';
import 'avalynx-cardslider/dist/css/avalynx-cardslider.css';

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxCardSlider displays correctly.

Installation via Symfony AssetMapper

php bin/console importmap:require avalynx-cardslider

After installing, you can import AvalynxCardSlider into your JavaScript file like this:

import { AvalynxCardSlider } from 'avalynx-cardslider';
import 'avalynx-cardslider/dist/css/avalynx-cardslider.css';

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxCardSlider displays correctly.

Installation via Symfony AssetComposer

More information about the Symfony AssetComposer Bundle can be found here.

{% do addAssetComposer('avalynx/avalynx-cardslider/dist/css/avalynx-cardslider.css') %}
{% do addAssetComposer('avalynx/avalynx-cardslider/dist/js/avalynx-cardslider.js') %}

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxCardSlider displays correctly.

Installation via Composer (Link)

AvalynxCardSlider is also available as a Composer package. You can add it to your project with the following command:

composer require avalynx/avalynx-cardslider

After installing, you can import AvalynxCardSlider into your HTML file like this:

<link href="vendor/avalynx/avalynx-cardslider/dist/css/avalynx-cardslider.css" rel="stylesheet">
<script src="vendor/avalynx/avalynx-cardslider/dist/js/avalynx-cardslider.js"></script>

Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxCardSlider displays correctly.

Usage

HTML structure (standard Bootstrap grid with ID on .row):

<div class="container">
  <!-- Wrapper is optional and is added automatically by JS if missing -->
  <div class="avalynx-cardslider-wrapper">
    <div class="row" id="myCardTrack">
      <!-- Use any Bootstrap breakpoints -->
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <div class="card">Content 1</div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <div class="card">Content 2</div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <div class="card">Content 3</div>
      </div>
    </div>
  </div>

  <!-- Optional controls outside wrapper for free positioning -->
  <div class="mt-3 text-center">
    <button id="btnPrev" class="btn btn-secondary">Back</button>
    <button id="btnNext" class="btn btn-primary">Next</button>
  </div>
  <div id="sliderDots" class="mt-3 text-center"></div>
</div>

JavaScript initialization:

new AvalynxCardSlider('myCardTrack', {
  scrollMode: 'page',
  prevBtnId: 'btnPrev',
  nextBtnId: 'btnNext',
  dotsId: 'sliderDots'
});

Options

AvalynxCardSlider allows the following options for customization:

• trackId: (string) ID of the .row container that holds the card columns.
• options: An object containing the following keys:
  • scrollMode: (string) Controls scrolling behavior. single advances one column at a time, page advances by the number of currently visible columns (default: single).
  • prevBtnId: (string) ID of the "Back" button (default: null).
  • nextBtnId: (string) ID of the "Next" button (default: null).
  • dotsId: (string) ID of the container where dynamic pagination dots are rendered (default: null).

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:

• Bug fixes
• Feature enhancements
• Documentation improvements

Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.

License

AvalynxCardSlider is open-sourced software licensed under the MIT license.

Contact

If you have any questions, feature requests, or issues, please open an issue on our GitHub repository or submit a pull request.

Thank you for considering AvalynxCardSlider for your project!