PHPackages model/slider - 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. [Utility & Helpers](/categories/utility) 4. / 5. model/slider ActiveLibrary[Utility & Helpers](/categories/utility) model/slider ============ Easy-to-use JavaScript slider v0.1.7(3w ago)05↓87.5%JavaScript Since Jun 3Pushed 3w agoCompare [ Source](https://github.com/model-composer/slider)[ Packagist](https://packagist.org/packages/model/slider)[ RSS](/packages/model-slider/feed)WikiDiscussions master Synced 1w ago READMEChangelogDependencies (2)Versions (9)Used By (0) model/slider ============ [](#modelslider) Simple, yet powerful, JavaScript slider. This is the ModEl 4 port of the legacy `ZkSlider` module. It ships the slider's CSS/JS as an asset library declared through an `AssetsProvider`, so `model/assets` discovers and serves them automatically — no manual file inclusion needed. Installation ------------ [](#installation) ``` composer require model/slider ``` Enabling the assets ------------------- [](#enabling-the-assets) The library is registered under the name `slider` but is **not** auto-enabled. Enable it (typically from a controller's `init`) wherever a page uses the slider: ``` use Model\Assets\Assets; Assets::enable('slider'); ``` This adds `style.css` (in the `head`) and `js.js` (in the `foot`) to the asset render list. Usage ----- [](#usage) Once the assets are enabled, create a div in this form: ``` First slide Second slide Third slide ``` The content of the slides can be virtually anything, from simple images to complex layouts. ### Slider size [](#slider-size) The slider is meant to constantly adapt to the content of the currently shown slides, so they have to have a certain width and height for it to read (either implicit, by its contents, or explicit, set with the options). ### Options [](#options) Every slider has a variety of options that can be set via `data-` attributes. So, for example, to set the `width`: ``` ``` The possible attributes are: - **id**: every slider in the page (you can have as many as you want) has its own alphanumeric id. You can set it manually via this attribute, otherwise it will be auto-assigned as an auto-increment value. - **width**: the width, in any accepted CSS unit (px, %, etc...), of the slider. If not declared, it will be set to auto, and the slider will try to adapt to the content of the slides. - **height**: the height, in any accepted CSS unit, of the slider. If not declared, it will be set to auto, and the slider will try to adapt to the content of the slides. - **type** (default `slide`): the type of transition; either `slide` or `fade`. - **direction** (default `o`): in a `slide` transition, this defines the direction (`o` for horizontal scrolling, `v` for vertical scrolling). - **force-width** (default `true`): if `true`, the single slide width is fixed to the width of the whole slider (or a fraction of it, for multiple visible slides). Otherwise, every slide can have its own width. - **force-height** (default `true`): same as `force-width`, but for height. - **visible** (default `1`): the number of slides simultaneously visible. In case of a forced width or height (depending on the direction), the slides are sized to a fraction of the whole. For example, if the slider is 800px wide and there are 2 visible slides, every slide is 400px. You can also pass a JSON object: ``` data-visible='{"768":1,"1024":2,"default":3}' ``` Meaning that up to a screen resolution of 768 one slide is visible; up to 1024px, 2 slides; from 1024 onwards, 3 slides. You can specify as many steps as you want, but `default` must always be present. - **interval** (default `false`): the number of milliseconds between one slide and the next, for auto-scrolling. - **step** (default `1`): number of slides to move together in the auto-scroll, if set above. - **show-dots** (default `false`): when `true`, a row of pagination dots is rendered, centered, in a new row below the slider. Clicking a dot moves the slider to that position. The active dot is filled; the inactive ones show only a coloured border. - **dots-mode** (default `page`): how many dots to show when `show-dots` is on. `page` renders one dot per page (`ceil(total slides / visible slides)`), so with 4 visible slides out of 12 you get 3 dots; `slide` renders one dot per individual slide regardless of how many are visible. - **dots-color**: the colour of the dots (any CSS colour). Applied through the `--zkslide-dots-color` custom property; defaults to `#0d6efd` if unset. - **callback** (default empty): a JavaScript callback called every time the slider moves (either manually or via the auto-interval). It takes a single parameter, the index of the slide it has moved to. It is also called at page load, with the index of the initial slide. Set it as `data-callback="function(n){ /* your code here */ }"`. ### Moving the slider [](#moving-the-slider) Beside setting the interval for auto-scrolling, you can manually move the slider via `zkMoveSlide`, in three different ways: - `zkMoveSlide(id, 3)`: move the slider to the 3rd slide. - `zkMoveSlide(id, '+3')`: move the slider forward by 3 slides. - `zkMoveSlide(id, '-2')`: move the slider backward by 2 slides. ### Changing options at runtime [](#changing-options-at-runtime) `zkSlideSetOptions(k, options)` changes options after the slide has been initialized. For example, you could decrease the number of visible slides if the screen resolution gets too low: ``` zkSlideSetOptions('your-slide-id', {'visible': 2}); ``` ### Health Score 35 — LowBetter than 77% of packages Maintenance94 Actively maintained with recent releases Popularity5 Limited adoption so far Community6 Small or concentrated contributor base Maturity29 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 Every ~4 days Total 8 Last Release 25d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/17624354?v=4)[Zorinik](/maintainers/Zorinik)[@Zorinik](https://github.com/Zorinik) --- Top Contributors [![Zorinik](https://avatars.githubusercontent.com/u/17624354?v=4)](https://github.com/Zorinik "Zorinik (5 commits)") ### Embed Badge ![Health badge](/badges/model-slider/health.svg) ``` [![Health](https://phpackages.com/badges/model-slider/health.svg)](https://phpackages.com/packages/model-slider) ``` ### Alternatives [razorpay/ifsc Razorpay IFSC Codes Library 385205.4k](/packages/razorpay-ifsc)[icehouse-ventures/laravel-mermaid Simple package to generate diagrams in Laravel using the Mermaid.js library 2639.0k](/packages/icehouse-ventures-laravel-mermaid)[fof/split Separate posts from one discussion into its own, splits discussions. 1253.0k5](/packages/fof-split)[devless/php-sdk Official Devless SDK 135.9k](/packages/devless-php-sdk) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)