Download the PHP package avalynx/avalynx-cardslider without Composer
On this page you can find all versions of the php package avalynx/avalynx-cardslider. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download avalynx/avalynx-cardslider
More information about avalynx/avalynx-cardslider
Files in avalynx/avalynx-cardslider
Package avalynx-cardslider
Short Description AvalynxCardSlider is a simple grid card slider for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
License MIT
Homepage https://github.com/avalynx/avalynx-cardslider
Informations about the package avalynx-cardslider
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) orpage(advance by full visible page width). - Page mode placeholders: If the last page is incomplete,
pagemode 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
- Overview
- Simple cardslider (Single)
- Page cardslider (Page)
- Alignment examples (Button/Dot)
- Alignment examples (Button/Dot, Page)
- Complex card example
Include directly in HTML
Make sure Bootstrap 5.3 (or newer) is included.
Include via jsDelivr (CDN)
Install via NPM (Link)
Then import in JavaScript:
Install via Symfony AssetMapper
Then import in JavaScript:
Install via Symfony AssetComposer
More information about the Symfony AssetComposer Bundle can be found here.
Install via Composer (PHP) (Link)
Include in HTML:
Usage
HTML structure (standard Bootstrap grid with ID on .row):
JavaScript initialization:
Options
trackId(string, required): ID of the.rowcontainer that holds the card columns.options(object):scrollMode(string): Controls scrolling behavior.singleadvances one column at a time,pageadvances 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! Please create a fork and submit a pull request. Keep code style consistent and include sufficient documentation.
License
AvalynxCardSlider is licensed under the MIT License.
Contact
Questions, feature requests, or issues? Please open an issue in the GitHub repository or submit a pull request.