包简介

Yii2 wrapper for Spidejs slider

README 文档

README

A yii2 wrapper for SplideJs slider.

License

MIT license. See license

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:

Using composer:

composer require eseperio/yii2-splide

Usage

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)

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

Semver	Changes
1.0.0	First release
1.1.0	Added clientEvents

Options

All options of Splide can be defined through widget properties

Properties of widget only

Property	Description
syncWith	Used to link sliders. Set the id of the splide you want to link. See Splide sliders linking docs in
mount	Defaults to `true`. Whether call mount on slider.
containerOptions	Html options for the slider container tag
clientEvents	Associative array of events for client side. `eventName => handler()` See SplideJS Events

Properties from Splidejs

Property	Description
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.

eseperio/yii2-splide 适用场景与选型建议

eseperio/yii2-splide 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 23 次下载、GitHub Stars 达 2，最近一次更新时间为 2020 年 11 月 28 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 eseperio/yii2-splide 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 eseperio/yii2-splide 我们能提供哪些服务？

定制开发 / 二次开发

基于 eseperio/yii2-splide 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

eseperio/yii2-splide

包简介