{"id":18850204,"url":"https://github.com/edofre/laravel-slider-pro","last_synced_at":"2025-04-14T09:21:24.972Z","repository":{"id":56975139,"uuid":"76295001","full_name":"Edofre/laravel-slider-pro","owner":"Edofre","description":"Laravel slider pro wrapper WIP","archived":false,"fork":false,"pushed_at":"2018-05-18T10:19:09.000Z","size":78,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T22:42:49.752Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Edofre.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE.MD","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":"2016-12-12T20:59:00.000Z","updated_at":"2024-06-20T07:24:05.000Z","dependencies_parsed_at":"2022-08-21T07:40:38.750Z","dependency_job_id":null,"html_url":"https://github.com/Edofre/laravel-slider-pro","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edofre%2Flaravel-slider-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edofre%2Flaravel-slider-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edofre%2Flaravel-slider-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edofre%2Flaravel-slider-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Edofre","download_url":"https://codeload.github.com/Edofre/laravel-slider-pro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852186,"owners_count":21171843,"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":[],"created_at":"2024-11-08T03:28:25.219Z","updated_at":"2025-04-14T09:21:24.942Z","avatar_url":"https://github.com/Edofre.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel slider-pro widget\n\n[![Latest Stable Version](https://poser.pugx.org/edofre/laravel-slider-pro/v/stable)](https://packagist.org/packages/edofre/laravel-slider-pro)\n[![Total Downloads](https://poser.pugx.org/edofre/laravel-slider-pro/downloads)](https://packagist.org/packages/edofre/laravel-slider-pro)\n[![Latest Unstable Version](https://poser.pugx.org/edofre/laravel-slider-pro/v/unstable)](https://packagist.org/packages/edofre/laravel-slider-pro)\n[![License](https://poser.pugx.org/edofre/laravel-slider-pro/license)](https://packagist.org/packages/edofre/laravel-slider-pro)\n[![composer.lock](https://poser.pugx.org/edofre/laravel-slider-pro/composerlock)](https://packagist.org/packages/edofre/laravel-slider-pro)\n[![Build Status](https://travis-ci.org/Edofre/laravel-slider-pro.svg?branch=master)](https://travis-ci.org/Edofre/laravel-slider-pro)\n\n## Installation\n\nThe preferred way to install this extension is through [composer](http://getcomposer.org/download/).\n\nTo install, either run\n\n```\n$ php composer.phar require edofre/laravel-slider-pro \"v1.0.4\"\n```\n\nor add\n\n```\n\"edofre/laravel-slider-pro\": \"v1.0.4\"\n```\n\nto the ```require``` section of your `composer.json` file.\n\n### Note\nThe fxp/composer-asset plugin is required for this package to install properly.\nThis plugin enables you to download bower packages through composer.\n\nYou can install it using this command:\n```\ncomposer global require \"fxp/composer-asset-plugin:^1.3.0”\n```\n\nThis will add the fxp composer-asset-plugin and your composer will be able to find and download the required bower-asset/slider-pro package.\nYou can find more info on this page: [https://packagist.org/packages/fxp/composer-asset-plugin](https://packagist.org/packages/fxp/composer-asset-plugin).\n\n## Configuration\nAdd the ServiceProvider to your config/app.php\n```php\n'providers' =\u003e [\n        ...\n        Edofre\\SliderPro\\SliderProServiceProvider::class,\n    ],\n```\n\nAnd add the facade\n```php\n'aliases' =\u003e [\n        ...\n        'SliderPro' =\u003e Edofre\\SliderPro\\Facades\\SliderPro::class,\n    ],\n```\n\n### Publish assets\nPublish the assets\n```\nphp artisan vendor:publish --tag=slider-\\pro\n```\n\n## Usage\n\nNot all available modules are available as objects, these will be implemented at a later date,\nif you need exact/precise control please use the second method of creating the slider.\n\nThe following 2 ways are available to instantiate the slider:\n\n### 1. You can use either the supplied php classes to generate the HTML\n\n#### WIP\n```php\nuse Edofre\\SliderPro\\Models\\Slide;\nuse Edofre\\SliderPro\\Models\\Slides\\Caption;\nuse Edofre\\SliderPro\\Models\\Slides\\Image;\nuse Edofre\\SliderPro\\Models\\Slides\\Layer;\n\n$slides = [\n\tnew Slide([\n\t\t'items' =\u003e [\n\t\t\tnew Image(['src' =\u003e '/images/test.jpg']),\n\t\t],\n\t]),\n\tnew Slide([\n\t\t'items' =\u003e [\n\t\t\tnew Image(['src' =\u003e '/images/test1.png']),\n\t\t\tnew Caption(['tag' =\u003e 'p', 'content' =\u003e 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.']),\n\t\t],\n\t]),\n\tnew Slide([\n\t\t'items' =\u003e [\n\t\t\tnew Image(['src' =\u003e '/images/test2.png']),\n\t\t\tnew Layer(['tag' =\u003e 'h3', 'content' =\u003e 'Lorem ipsum dolor sit amet', 'htmlOptions' =\u003e ['class' =\u003e 'sp-black', 'data-position' =\u003e \"bottomLeft\", 'data-horizontal' =\u003e \"10%\", 'data-show-transition' =\u003e \"left\", 'data-show-delay' =\u003e \"300\", 'data-hide-transition' =\u003e \"right\"]]),\n\t\t\tnew Layer(['tag' =\u003e 'p', 'content' =\u003e 'consectetur adipisicing elit', 'htmlOptions' =\u003e ['class' =\u003e 'sp-white sp-padding', 'data-width' =\u003e \"200\", 'data-horizontal' =\u003e \"center\", 'data-vertical' =\u003e \"40%\", 'data-show-transition' =\u003e \"down\", 'data-hide-transition' =\u003e \"up\"]]),\n\t\t\tnew Layer(['tag' =\u003e 'div', 'content' =\u003e 'Static content', 'htmlOptions' =\u003e ['class' =\u003e 'sp-static']]),\n\t\t],\n\t]),\n\tnew Slide([\n\t\t'content' =\u003e\n\t\t\t'\u003ca class=\"sp-video\" href=\"http://vimeo.com/109354891\"\u003e\n\t\t\t\t\u003cimg src=\"http://lorempixel.com/960/500/sports/5\" width=\"500\" height=\"300\"/\u003e\n\t\t\t\u003c/a\u003e'\n\t\t,\n\t]),\n\tnew Slide([\n\t\t'items' =\u003e [\n\t\t\tnew Layer(['tag' =\u003e 'h3', 'content' =\u003e 'Lorem ipsum dolor sit amet']),\n\t\t\tnew Layer(['tag' =\u003e 'p', 'content' =\u003e 'Consectetur adipisicing elit']),\n\t\t],\n\t]),\n];\n\n$thumbnails = [\n\tnew \\Edofre\\SliderPro\\Models\\Thumbnail(['tag' =\u003e 'img', 'htmlOptions' =\u003e ['src' =\u003e \"/images/ttest.jpg\", 'data-src' =\u003e \"/images/test.jpg\"]]),\n\tnew \\Edofre\\SliderPro\\Models\\Thumbnail(['tag' =\u003e 'img', 'htmlOptions' =\u003e ['src' =\u003e \"/images/ttest1.png\", 'data-src' =\u003e \"/images/test1.png\"]]),\n\tnew \\Edofre\\SliderPro\\Models\\Thumbnail(['tag' =\u003e 'img', 'htmlOptions' =\u003e ['src' =\u003e \"/images/ttest2.png\", 'data-src' =\u003e \"/images/test2.png\"]]),\n\tnew \\Edofre\\SliderPro\\Models\\Thumbnail(['tag' =\u003e 'p', 'content' =\u003e 'Thumbnail for video']),\n\tnew \\Edofre\\SliderPro\\Models\\Thumbnail(['tag' =\u003e 'p', 'content' =\u003e 'Thumbnail 5']),\n];\n?\u003e\n\n\u003c?= \\Edofre\\SliderPro\\SliderPro::widget([\n\t'id'            =\u003e 'my-slider',\n\t'slides'        =\u003e $slides,\n\t'thumbnails'    =\u003e $thumbnails,\n\t'sliderOptions' =\u003e [\n\t\t'width'  =\u003e 960,\n\t\t'height' =\u003e 500,\n\t\t'arrows' =\u003e true,\n\t\t'init'   =\u003e new \\yii\\web\\JsExpression(\"\n\t\t\tfunction() {\n\t\t\t\tconsole.log('slider is initialized');\n\t\t\t}\n\t\t\"),\n\t],\n]);\n?\u003e\n```\n\n### 2. Or you can create your own HTML code to generate the slider\n\n```php\n$slider = new SliderPro();\n$slider-\u003esetId('my-slider');\n$slider-\u003esetOptions([\n        'sliderOptions' =\u003e [\n                'width'  =\u003e 960,\n                'height' =\u003e 500,\n                'arrows' =\u003e true,\n                'init'   =\u003e new \\Edofre\\SliderPro\\JsExpression(\"\n            function() {\n                console.log('slider is initialized');\n            }\n        \"),\n        ]\n]);\n?\u003e\n\n\u003cdiv class=\"slider-pro\" id=\"my-slider\"\u003e\n    \u003cdiv class=\"sp-slides\"\u003e\n        \u003c!-- Slide 1 --\u003e\n        \u003cdiv class=\"sp-slide\"\u003e\n            \u003cimg class=\"sp-image\" src=\"http://lorempixel.com/960/500/sports/1\"/\u003e\n        \u003c/div\u003e\n        \u003c!-- Slide 2 --\u003e\n        \u003cdiv class=\"sp-slide\"\u003e\n            \u003cimg class=\"sp-image\" src=\"http://lorempixel.com/960/500/sports/2\"/\u003e\n            \u003cp class=\"sp-caption\"\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e\n        \u003c/div\u003e\n        \u003c!-- Slide 3 --\u003e\n        \u003cdiv class=\"sp-slide\"\u003e\n            \u003cp\u003eLorem ipsum dolor sit amet\u003c/p\u003e\n        \u003c/div\u003e\n        \u003c!-- Slide 4 --\u003e\n        \u003cdiv class=\"sp-slide\"\u003e\n            \u003cimg class=\"sp-image\" src=\"http://lorempixel.com/960/500/sports/3\"/\u003e\n            \u003ch3 class=\"sp-layer sp-black\"\n                data-position=\"bottomLeft\" data-horizontal=\"10%\"\n                data-show-transition=\"left\" data-show-delay=\"300\" data-hide-transition=\"right\"\u003e\n                Lorem ipsum dolor sit amet\n            \u003c/h3\u003e\n            \u003cp class=\"sp-layer sp-white sp-padding\"\n               data-width=\"200\" data-horizontal=\"center\" data-vertical=\"40%\"\n               data-show-transition=\"down\" data-hide-transition=\"up\"\u003e\n                consectetur adipisicing elit\n            \u003c/p\u003e\n            \u003cdiv class=\"sp-layer sp-static\"\u003eStatic content\u003c/div\u003e\n        \u003c/div\u003e\n        \u003c!-- Slide 5 --\u003e\n        \u003cdiv class=\"sp-slide\"\u003e\n            \u003ch3 class=\"sp-layer\"\u003eLorem ipsum dolor sit amet\u003c/h3\u003e\n            \u003cp class=\"sp-layer\"\u003econsectetur adipisicing elit\u003c/p\u003e\n        \u003c/div\u003e\n\n        \u003c!-- thumbnails --\u003e\n        \u003cdiv class=\"sp-thumbnails\"\u003e\n            \u003cimg class=\"sp-thumbnail\" src=\"http://lorempixel.com/960/500/sports/1\" data-src=\"http://lorempixel.com/480/250/sports/1\"/\u003e\n            \u003cimg class=\"sp-thumbnail\" src=\"http://lorempixel.com/960/500/sports/2\" data-src=\"http://lorempixel.com/480/250/sports/2\"/\u003e\n            \u003cimg class=\"sp-thumbnail\" src=\"http://lorempixel.com/960/500/sports/3\" data-src=\"http://lorempixel.com/480/250/sports/3\"/\u003e\n            \u003cp class=\"sp-thumbnail\"\u003eThumbnail 4\u003c/p\u003e\n            \u003cp class=\"sp-thumbnail\"\u003eThumbnail 5\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\u003c?= $slider-\u003egenerate(false); // Specify false so we don't generate a new \u003cdiv\u003e ?\u003e\n```\n\n## Tests\n\nRun the tests by executing the following command:\n```\ncomposer test\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedofre%2Flaravel-slider-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedofre%2Flaravel-slider-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedofre%2Flaravel-slider-pro/lists"}