PHPackages                             avalynx/avalynx-cardslider - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. avalynx/avalynx-cardslider

ActiveLibrary

avalynx/avalynx-cardslider
==========================

AvalynxCardSlider is a simple grid card slider for web applications. Based on Bootstrap &gt;=5.3 without any framework dependencies.

1.0.0(1w ago)12↓100%MITJavaScriptCI passing

Since Mar 16Pushed 1w agoCompare

[ Source](https://github.com/avalynx/avalynx-cardslider)[ Packagist](https://packagist.org/packages/avalynx/avalynx-cardslider)[ Docs](https://github.com/avalynx/avalynx-cardslider)[ RSS](/packages/avalynx-avalynx-cardslider/feed)WikiDiscussions main Synced today

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

AvalynxCardSlider
=================

[](#avalynxcardslider)

[![npm Version](https://camo.githubusercontent.com/dbe046df0ec95f3eef7f8b9d59bb141b6ec72cbb36c7fb60d82909d285b12534/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6176616c796e782d63617264736c69646572)](https://www.npmjs.com/package/avalynx-cardslider)[![npm Downloads](https://camo.githubusercontent.com/650c05dd4e2f2a637fb2e0bb0db82bd69113369e51457c8ca4d74f254a5edd7b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6176616c796e782d63617264736c69646572)](https://www.npmjs.com/package/avalynx-cardslider)[![jsDelivr](https://camo.githubusercontent.com/03a5efb956c63a426992604f9e9a9daab5d7bf1fce79f65c510651c12d2bb23b/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6176616c796e782d63617264736c69646572)](https://www.jsdelivr.com/package/npm/avalynx-cardslider)[![License](https://camo.githubusercontent.com/02d82d0da80b0f45b672386b8c208360ab49c9443b7ca5fc17b4b57ef0fa08ca/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6176616c796e782d63617264736c69646572)](LICENSE)[![GitHub stars](https://camo.githubusercontent.com/392b1f839593b0cef568dcedb6bff43a65fc0df317ccb216ea2279f5ceb803d8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6176616c796e782f6176616c796e782d63617264736c696465723f7374796c653d666c6174266c6f676f3d676974687562)](https://github.com/avalynx/avalynx-cardslider)

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
--------

[](#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
--------

[](#examples)

- [Overview](https://avalynx-cardslider.jbs-newmedia.de/examples/index.html)
- [Simple cardslider (Single)](https://avalynx-cardslider.jbs-newmedia.de/examples/simple-cardslider.html)
- [Page cardslider (Page)](https://avalynx-cardslider.jbs-newmedia.de/examples/page-cardslider.html)
- [Alignment examples (Button/Dot)](https://avalynx-cardslider.jbs-newmedia.de/examples/alignment-examples.html)
- [Alignment examples (Button/Dot, Page)](https://avalynx-cardslider.jbs-newmedia.de/examples/alignment-page-examples.html)
- [Complex card example](https://avalynx-cardslider.jbs-newmedia.de/examples/complex-card.html)

Include directly in HTML
------------------------

[](#include-directly-in-html)

Make sure Bootstrap 5.3 (or newer) is included.

```

```

Include via jsDelivr (CDN)
--------------------------

[](#include-via-jsdelivr-cdn)

```

```

Install via NPM ([Link](https://www.npmjs.com/package/avalynx-cardslider))
--------------------------------------------------------------------------

[](#install-via-npm-link)

```
npm install avalynx-cardslider
```

Then import in JavaScript:

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

Install via Symfony AssetMapper
-------------------------------

[](#install-via-symfony-assetmapper)

```
php bin/console importmap:require avalynx-cardslider
```

Then import in JavaScript:

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

Install via Symfony AssetComposer
---------------------------------

[](#install-via-symfony-assetcomposer)

More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).

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

Install via Composer (PHP) ([Link](https://packagist.org/packages/avalynx/avalynx-cardslider))
----------------------------------------------------------------------------------------------

[](#install-via-composer-php-link)

```
composer require avalynx/avalynx-cardslider
```

Include in HTML:

```

```

Usage
-----

[](#usage)

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

```

        Content 1

        Content 2

        Content 3

    Back
    Next

```

JavaScript initialization:

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

Options
-------

[](#options)

- `trackId` (string, required): ID of the `.row` container that holds the card columns.
- `options` (object):
    - `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
------------

[](#contributing)

Contributions are welcome! Please create a fork and submit a pull request. Keep code style consistent and include sufficient documentation.

License
-------

[](#license)

AvalynxCardSlider is licensed under the [MIT License](LICENSE).

Contact
-------

[](#contact)

Questions, feature requests, or issues? Please open an issue in the [GitHub repository](https://github.com/avalynx/avalynx-cardslider/issues)or submit a pull request.

###  Health Score

37

—

LowBetter than 84% of packages

Maintenance98

Actively maintained with recent releases

Popularity5

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity33

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

8d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/44b85e5ce069ccae08123600bb24204ea8fe99c8cb5cbfae108ff29c179e503d?d=identicon)[jschwind](/maintainers/jschwind)

---

Top Contributors

[![jschwind](https://avatars.githubusercontent.com/u/985564?v=4)](https://github.com/jschwind "jschwind (9 commits)")

---

Tags

avalynxbootstrapbootstrap5cardslidercomponentgridslidergridcomponentbootstrapsliderbootstrap5avalynxcardslider

### Embed Badge

![Health badge](/badges/avalynx-avalynx-cardslider/health.svg)

```
[![Health](https://phpackages.com/badges/avalynx-avalynx-cardslider/health.svg)](https://phpackages.com/packages/avalynx-avalynx-cardslider)
```

###  Alternatives

[atk4/ui

Agile UI - Web Component Framework written in PHP

450539.4k30](/packages/atk4-ui)[yiisoft/yii2-bootstrap5

The Twitter Bootstrap v5 extension for the Yii framework

661.3M110](/packages/yiisoft-yii2-bootstrap5)[nayjest/grids

Grids for Laravel 4 &amp; Laravel 5 frameworks

200151.2k1](/packages/nayjest-grids)[haubek/bootstrap4c-chosen

Bootstrap 4 Component - Chosen

8174.8k](/packages/haubek-bootstrap4c-chosen)[kartik-v/yii2-slider

An advanced slider input for Yii Framework 2 for both touch enabled and desktop devices based on bootstrap-slider.

30772.5k4](/packages/kartik-v-yii2-slider)[leantony/laravel-grid

A grid view for laravel, inspired by the yii2 grid widget

9059.8k](/packages/leantony-laravel-grid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
