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 >=5.3 without any framework dependencies. 1.0.0(1mo ago)12↓100%MITJavaScriptCI passing Since Mar 16Pushed 1mo 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 1mo ago 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 35 — LowBetter than 80% of packages Maintenance89 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 55d 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 454540.1k32](/packages/atk4-ui)[yiisoft/yii2-bootstrap5 The Twitter Bootstrap v5 extension for the Yii framework 661.4M121](/packages/yiisoft-yii2-bootstrap5)[nayjest/grids Grids for Laravel 4 & Laravel 5 frameworks 200152.0k1](/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. 30784.4k4](/packages/kartik-v-yii2-slider)[leantony/laravel-grid A grid view for laravel, inspired by the yii2 grid widget 9060.2k](/packages/leantony-laravel-grid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)