{"id":15169724,"url":"https://github.com/coderius/yii2-swiper-slider","last_synced_at":"2025-05-06T14:09:24.184Z","repository":{"id":56485081,"uuid":"306958628","full_name":"coderius/yii2-swiper-slider","owner":"coderius","description":"Yii2 widget for js plugin \"swiper\" slider. Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.","archived":false,"fork":false,"pushed_at":"2021-04-11T12:37:15.000Z","size":764,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T22:01:32.928Z","etag":null,"topics":["slider","swiper","yii2-extension","yii2-slider-widget","yii2-widgets"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-24T19:42:21.000Z","updated_at":"2021-04-11T12:37:16.000Z","dependencies_parsed_at":"2022-08-15T19:40:22.820Z","dependency_job_id":null,"html_url":"https://github.com/coderius/yii2-swiper-slider","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderius%2Fyii2-swiper-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderius%2Fyii2-swiper-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderius%2Fyii2-swiper-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderius%2Fyii2-swiper-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderius","download_url":"https://codeload.github.com/coderius/yii2-swiper-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252699489,"owners_count":21790679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["slider","swiper","yii2-extension","yii2-slider-widget","yii2-widgets"],"created_at":"2024-09-27T07:21:36.243Z","updated_at":"2025-05-06T14:09:24.134Z","avatar_url":"https://github.com/coderius.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yii2 swiper slider widget\n[![Software License](https://img.shields.io/github/license/coderius/yii2-swiper-slider)](LICENSE.md)\n[![Code Coverage](https://scrutinizer-ci.com/g/coderius/yii2-swiper-slider/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/coderius/yii2-swiper-slider/?branch=master)\n![Scrutinizer code quality (GitHub/Bitbucket)](https://img.shields.io/scrutinizer/quality/g/coderius/yii2-swiper-slider)\n[![CodeFactor](https://www.codefactor.io/repository/github/coderius/yii2-swiper-slider/badge)](https://www.codefactor.io/repository/github/coderius/yii2-swiper-slider)\n![StyleCI](https://github.styleci.io/repos/306958628/shield?branch=master)\n\u003c!-- [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/coderius/yii2-swiper-slider/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/coderius/yii2-swiper-slider/?branch=master) --\u003e\n\u003c!-- [![Total Downloads](https://img.shields.io/packagist/dt/coderius/yii2-swiper-slider.svg?style=flat-square)](https://packagist.org/packages/coderius/yii2-swiper-slider) --\u003e\n\n## About\nThis is yii2 extention widget renders js slider [Swiper](https://github.com/nolimits4web/swiper).\nThis widget allows render slider in web page simply. Created for Yii2 framework.\n\n![Yii2 swiper slider widget example](https://raw.githubusercontent.com/coderius/github-images/master/ezgif.com-gif-maker.gif \"Yii2 swiper slider widget example\")\n\n![Yii2 swiper slider widget example](https://raw.githubusercontent.com/coderius/github-images/master/FireShotCapture015-SwiperDemos-swiperjs.com.png \"Yii2 swiper slider widget example\")\n\n## Installation\n\nThe preferred way to install this extension is through [composer](http://getcomposer.org/download/).\n\nFirst download extention. Run the command in the terminal:\n```\ncomposer require coderius/yii2-swiper-slider:^1.0\n```\n\nor add in composer.json\n```\n\"coderius/yii2-swiper-slider\": \"^1.0\"\n```\nand run `composer update`\n\n## Usage\n\n### Widger with minimum options\n\nYou can only specify content for slides. This parameter is required.\n\nIn all files with widget put namespace to use class like:\n```\n\u003c?php\nnamespace yournamespace\n\nuse coderius\\swiperslider\\SwiperSlider;\n\n//Code ...\n```\n\nIn view file render widget:\n```\n\u003c?php\n    echo \\coderius\\swiperslider\\SwiperSlider::widget([\n        'slides' =\u003e [\n            'one',\n            'two',\n            'three',\n            '\u003cimg src=\"https://swiperjs.com/demos/images/nature-1.jpg\"\u003e',\n            '\u003cimg src=\"https://swiperjs.com/demos/images/nature-2.jpg\"\u003e'\n        ],\n    ]);\n?\u003e\n```\n### Widget with more options:\n\nYou can customize the parameters of the widget\n\nIn view file render widget:\n```\n\u003c?php\n    echo \\coderius\\swiperslider\\SwiperSlider::widget([\n        // 'on ' . \\coderius\\swiperslider\\SwiperSlider::EVENT_AFTER_REGISTER_DEFAULT_ASSET =\u003e function(){\n        //     CustomAsset::register($view);\n        // },\n        'showScrollbar' =\u003e true,\n        'slides' =\u003e [\n            [\n                'value' =\u003e 'ggg',\n                'options' =\u003e [\n                    'style' =\u003e [\"background-image\" =\u003e \"url(https://swiperjs.com/demos/images/nature-1.jpg)\"]\n                ]\n            ],\n            '\u003cimg src=\"https://swiperjs.com/demos/images/nature-2.jpg\"\u003e',\n            'one',\n            'two',\n            'three',\n            'fore',\n            'five'\n        ],\n        // 'assetFromCdn' =\u003e true,\n        'clientOptions' =\u003e [\n            'slidesPerView' =\u003e 4,\n            'spaceBetween'=\u003e 30,\n            'centeredSlides'=\u003e true,\n            'pagination' =\u003e [\n                'clickable' =\u003e true,\n                'renderBullet' =\u003e new \\yii\\web\\JsExpression(\"function (index, className) {\n                        return '\u003cspan class=\\\"' + className + '\\\"\u003e' + (index + 1) + '\u003c/span\u003e';\n                    },\n                \"),\n                ],\n                \"scrollbar\" =\u003e [\n                    \"el\" =\u003e \\coderius\\swiperslider\\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),\n                    \"hide\" =\u003e true,\n                ],\n        ],\n\n        //Global styles to elements. If create styles for all slides\n        'options' =\u003e [\n            'styles' =\u003e [\n                \\coderius\\swiperslider\\SwiperSlider::CONTAINER =\u003e [\"height\" =\u003e \"100px\"],\n                \\coderius\\swiperslider\\SwiperSlider::SLIDE =\u003e [\"text-align\" =\u003e \"center\"],\n            ],\n        ],\n            \n    ]);\n?\u003e\n```\n\n### Widget options\n\n__Events__:\n* EVENT_BEFORE_REGISTER_DEFAULT_ASSET\n* EVENT_AFTER_REGISTER_DEFAULT_ASSET\n\nUsage in widget:\n```\necho \\coderius\\swiperslider\\SwiperSlider::widget([\n    ...\n'on ' . \\coderius\\swiperslider\\SwiperSlider::EVENT_AFTER_REGISTER_DEFAULT_ASSET =\u003e function(){\n        CustomAsset::register($view);\n},\n```\n__showScrollbar__: true | false. Default is false\n\n__showPagination__: true | false. Default is true\n\n__slides__: string | array | . Contents slides content like \u003cimg\u003e or any string. Or array with keys: *value*, *options*. *value* maybe like \nstring or Closure (function($tag, $index, $self){}). Example:\n```\n'slides' =\u003e [\n        [\n            'value' =\u003e 'ggg',\n            'options' =\u003e [\n                'style' =\u003e [\"background-image\" =\u003e \"url(https://swiperjs.com/demos/images/nature-1.jpg)\"]\n            ]\n        ],\n        [\n            'value' =\u003e function($tag, $index, $self){\n                return \"some value {$index}\";\n            },\n            'options' =\u003e [\n                'style' =\u003e [\"color\" =\u003e \"green\"]\n            ]\n        ],\n...\n```\n__clientOptions__: array. This options is pasted when initialize Swiper js (new Swiper('options here')).\nPlease, remember that if you are required to add javascript to the configuration of the js plugin and is required to be \nplain JS, make use of `JsExpression`. That class was made by Yii for that specific purpose. For example:\n```\n'clientOptions' =\u003e [\n    'slidesPerView' =\u003e 4,\n    'spaceBetween'=\u003e 30,\n    'centeredSlides'=\u003e true,\n    'pagination' =\u003e [\n        'clickable' =\u003e true,\n        'renderBullet' =\u003e new \\yii\\web\\JsExpression(\"function (index, className) {\n                return '\u003cspan class=\\\"' + className + '\\\"\u003e' + (index + 1) + '\u003c/span\u003e';\n            },\n        \"),\n        ],\n        \"scrollbar\" =\u003e [\n            \"el\" =\u003e \\coderius\\swiperslider\\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),\n            \"hide\" =\u003e true,\n        ],\n],\n```\n__options__: array. This options is pasted when rendered dom elements. Various attributes for html elements are set here.\nThis params allowed only for all template items:\n```\n//Global styles to elements. If create styles for all slides\n'options' =\u003e [\n    'styles' =\u003e [\n        \\coderius\\swiperslider\\SwiperSlider::CONTAINER =\u003e [\"height\" =\u003e \"100px\"],\n        \\coderius\\swiperslider\\SwiperSlider::SLIDE =\u003e [\"text-align\" =\u003e \"center\"],\n    ],\n    'class' =\u003e [\\coderius\\swiperslider\\SwiperSlider::CONTAINER =\u003e [\"myClass\"],]\n],\n\n```\n\nIt is best to use constants to specify template elements:\n* CONTAINER = 'container';\n* WRAPPER = 'wrapper';\n* SLIDE = 'slide';\n* PAGINATION = 'pagination';\n* BUTTON_PREV = 'button-prev';\n* BUTTON_NEXT = 'button-next';\n* SCROLLBAR = 'scrollbar';\n\n## Testing\n\nRun tests in extention folder.\n\n```bash\n$ ./vendor/bin/phpunit\n```\n\nNote! \nFor running all tests needed upload all dependencies by composer. If tested single extention, then run command from root directory where located extention:\n```\ncomposer update\n```\n\nWhen all dependencies downloaded run all tests in terminal from root folder:\n```\n./vendor/bin/phpunit tests\n```\nOr for only unit:\n```\n./vendor/bin/phpunit --testsuite Unit\n```\n\nIf extention tested in app, then set correct path to phpunit and run some commands.\n\n## Credits\n\n- [Sergio Coderius](https://github.com/coderius)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderius%2Fyii2-swiper-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderius%2Fyii2-swiper-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderius%2Fyii2-swiper-slider/lists"}