PHPackages eseperio/yii2-splide - 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. eseperio/yii2-splide ActiveYii2-extension[Utility & Helpers](/categories/utility) eseperio/yii2-splide ==================== Yii2 wrapper for Spidejs slider 1.1.0(5y ago)223MITPHP Since Nov 29Pushed 5y ago1 watchersCompare [ Source](https://github.com/Eseperio/yii2-splide)[ Packagist](https://packagist.org/packages/eseperio/yii2-splide)[ RSS](/packages/eseperio-yii2-splide/feed)WikiDiscussions main Synced yesterday READMEChangelog (2)Dependencies (4)Versions (3)Used By (0) Yii2-Splide =========== [](#yii2-splide) A yii2 wrapper for [SplideJs slider](https://github.com/Splidejs/splide). License ------- [](#license) MIT license. See [license](license.md) Content ------- [](#content) - Assets - Asset bundle with main styles (SplideCoreAsset) - Asset bundle with main styles and default theme (SplideAsset) - Widgets - Splide: Widget to render a splide slider - SplideThumbnailCarousel: Renders two sliders synced, one for main slider and other for thumbnails. Installation: ------------- [](#installation) Using composer: `composer require eseperio/yii2-splide` Usage ----- [](#usage) ### Widgets [](#widgets) There are two widgets. The former, a simple Splide slide, while the latter is a combination of two Splide slider for creating a carousel with thumbnail navigation (See [thumbnail slider](https://splidejs.com/thumbnail-slider/)) ``` Video and grid not yet supported in current version of the wrapper. ``` ``` echo Splide::widget([ 'items' => [ [ 'url' => 'http://someurl.com/image.jpg' ], [ 'url' => ['some/yii2urlformat', 'param1' => 'example'] ], [ 'type'=> Splide::TYPE_HTML, 'html'=> 'htmlcodegoeshere', ] ], ]); ``` **Thumbnail slider** ``` echo \eseperio\splide\widgets\SplideThumbnailCarousel::widget([ 'items' => $items ]); ``` ### Changelog [](#changelog) SemverChanges1.0.0First release1.1.0Added clientEvents### Options [](#options) All options of Splide can be defined through widget properties ### Properties of widget only [](#properties-of-widget-only) PropertyDescriptionsyncWithUsed to link sliders. Set the id of the splide you want to link. See Splide sliders linking docs inmountDefaults to `true`. Whether call mount on slider.containerOptionsHtml options for the slider container tagclientEventsAssociative array of events for client side. `eventName => handler()` [See SplideJS Events](https://splidejs.com/events/)### Properties from Splidejs [](#properties-from-splidejs) PropertyDescription**type**Determine a slider type.**rewind**Whether to rewind a slider before the first slide or after the last one.**speed**Transition speed in milliseconds.**rewindSpeed**Transition speed on rewind in milliseconds.**waitForTransition**Whether to prevent any actions while a slider is transitioning.**width**Define slider max width.**height**Define slider height.**fixedWidth**Fix width of slides.**fixedHeight**Fix height of slides.**heightRatio**Determine height of slides by ratio to a slider width.**autoWidth**If true, slide width will be determined by the element width itself. This is for a horizontal slider.**autoHeight**If true, slide height will be determined by the element height itself. This is for a vertical slider.**perPage**Determine how many slides should be displayed per page.**perMove**Determine how many slides should be moved when a slider goes to next or previous page.**clones**Manually determine how many clones should be generated on one side.**start**Start index.**focus**Determine which slide should be focused.**gap**Gap between slides.**padding**Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.**easing**Animation timing function for CSS transition.**arrows**Whether to append arrows.**arrowPath**Change the arrow SVG path.**pagination**Whether to append pagination(indicator dots).**autoplay**Whether to enable autoplay.**interval**Autoplay interval in milliseconds.**pauseOnHover**Whether to stop autoplay while a slider is hovered.**pauseOnFocus**Whether to stop autoplay while a slider elements are focused.**resetProgress**Whether to reset progress of the autoplay timer when resumed.**lazyLoad**Enable lazy load for images.**preloadPages**Determine how many pages around an active slide should be loaded beforehand. This only works the lazyLoad option is “nearby”.**keyboard**Whether to control a slider via keyboard.**drag**Whether to allow mouse drag and touch swipe.**dragAngleThreshold**The angle threshold for drag.**swipeDistanceThreshold**Distance threshold for determining if the action is “flick” or “swipe”.**flickVelocityThreshold**Velocity threshold for determining if the action is “flick” or “swipe”.**flickPower**Determine power of flick. The larger number this is, the farther a slider runs by flick.**flickMaxPages**Limit a number of pages to move by flick.**direction**Slider direction.**cover**Whether to convert an img src to background-image of its parent element. height, fixedHeight or heightRatio is required.**accessibility**Whether to enable accessibility(aria and screen reader texts) or not.**slideFocus**Whether to add tabindex=”0″ to visible slides or not.**isNavigation**Determine if a slider is navigation for another.**trimSpace**Whether to trim spaces before the first slide or after the last one.**updateOnMove**If true, is-active class added to the slide element before transition.**throttle**Throttle duration for the resize event.**breakpoints**Breakpoints definitions.**classes**Collection of class names.**i18n**Collection of texts for i18n. ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community7 Small or concentrated contributor base Maturity54 Maturing project, gaining track record 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 ~149 days Total 2 Last Release 1841d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b1e173755eb4a5abae378ed4c8a8e8066f578c3192105c5e3f9b8ea3ef0086e7?d=identicon)[Eseperio](/maintainers/Eseperio) --- Top Contributors [![Eseperio](https://avatars.githubusercontent.com/u/5459366?v=4)](https://github.com/Eseperio "Eseperio (22 commits)") ### Embed Badge ![Health badge](/badges/eseperio-yii2-splide/health.svg) ``` [![Health](https://phpackages.com/badges/eseperio-yii2-splide/health.svg)](https://phpackages.com/packages/eseperio-yii2-splide) ``` ### Alternatives [dmstr/yii2-cookie-consent Yii2 Cookie Consent Widget 1452.6k](/packages/dmstr-yii2-cookie-consent) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)