https://github.com/edofre/laravel-slider-pro
Laravel slider pro wrapper WIP
https://github.com/edofre/laravel-slider-pro
Last synced: over 1 year ago
JSON representation
Laravel slider pro wrapper WIP
- Host: GitHub
- URL: https://github.com/edofre/laravel-slider-pro
- Owner: Edofre
- License: mit
- Created: 2016-12-12T20:59:00.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-05-18T10:19:09.000Z (about 8 years ago)
- Last Synced: 2025-03-27T22:42:49.752Z (over 1 year ago)
- Language: PHP
- Size: 76.2 KB
- Stars: 10
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGE.MD
- License: LICENSE.md
Awesome Lists containing this project
README
# Laravel slider-pro widget
[](https://packagist.org/packages/edofre/laravel-slider-pro)
[](https://packagist.org/packages/edofre/laravel-slider-pro)
[](https://packagist.org/packages/edofre/laravel-slider-pro)
[](https://packagist.org/packages/edofre/laravel-slider-pro)
[](https://packagist.org/packages/edofre/laravel-slider-pro)
[](https://travis-ci.org/Edofre/laravel-slider-pro)
## Installation
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
To install, either run
```
$ php composer.phar require edofre/laravel-slider-pro "v1.0.4"
```
or add
```
"edofre/laravel-slider-pro": "v1.0.4"
```
to the ```require``` section of your `composer.json` file.
### Note
The fxp/composer-asset plugin is required for this package to install properly.
This plugin enables you to download bower packages through composer.
You can install it using this command:
```
composer global require "fxp/composer-asset-plugin:^1.3.0”
```
This will add the fxp composer-asset-plugin and your composer will be able to find and download the required bower-asset/slider-pro package.
You can find more info on this page: [https://packagist.org/packages/fxp/composer-asset-plugin](https://packagist.org/packages/fxp/composer-asset-plugin).
## Configuration
Add the ServiceProvider to your config/app.php
```php
'providers' => [
...
Edofre\SliderPro\SliderProServiceProvider::class,
],
```
And add the facade
```php
'aliases' => [
...
'SliderPro' => Edofre\SliderPro\Facades\SliderPro::class,
],
```
### Publish assets
Publish the assets
```
php artisan vendor:publish --tag=slider-\pro
```
## Usage
Not all available modules are available as objects, these will be implemented at a later date,
if you need exact/precise control please use the second method of creating the slider.
The following 2 ways are available to instantiate the slider:
### 1. You can use either the supplied php classes to generate the HTML
#### WIP
```php
use Edofre\SliderPro\Models\Slide;
use Edofre\SliderPro\Models\Slides\Caption;
use Edofre\SliderPro\Models\Slides\Image;
use Edofre\SliderPro\Models\Slides\Layer;
$slides = [
new Slide([
'items' => [
new Image(['src' => '/images/test.jpg']),
],
]),
new Slide([
'items' => [
new Image(['src' => '/images/test1.png']),
new Caption(['tag' => 'p', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.']),
],
]),
new Slide([
'items' => [
new Image(['src' => '/images/test2.png']),
new Layer(['tag' => 'h3', 'content' => 'Lorem ipsum dolor sit amet', 'htmlOptions' => ['class' => 'sp-black', 'data-position' => "bottomLeft", 'data-horizontal' => "10%", 'data-show-transition' => "left", 'data-show-delay' => "300", 'data-hide-transition' => "right"]]),
new Layer(['tag' => 'p', 'content' => 'consectetur adipisicing elit', 'htmlOptions' => ['class' => 'sp-white sp-padding', 'data-width' => "200", 'data-horizontal' => "center", 'data-vertical' => "40%", 'data-show-transition' => "down", 'data-hide-transition' => "up"]]),
new Layer(['tag' => 'div', 'content' => 'Static content', 'htmlOptions' => ['class' => 'sp-static']]),
],
]),
new Slide([
'content' =>
'
'
,
]),
new Slide([
'items' => [
new Layer(['tag' => 'h3', 'content' => 'Lorem ipsum dolor sit amet']),
new Layer(['tag' => 'p', 'content' => 'Consectetur adipisicing elit']),
],
]),
];
$thumbnails = [
new \Edofre\SliderPro\Models\Thumbnail(['tag' => 'img', 'htmlOptions' => ['src' => "/images/ttest.jpg", 'data-src' => "/images/test.jpg"]]),
new \Edofre\SliderPro\Models\Thumbnail(['tag' => 'img', 'htmlOptions' => ['src' => "/images/ttest1.png", 'data-src' => "/images/test1.png"]]),
new \Edofre\SliderPro\Models\Thumbnail(['tag' => 'img', 'htmlOptions' => ['src' => "/images/ttest2.png", 'data-src' => "/images/test2.png"]]),
new \Edofre\SliderPro\Models\Thumbnail(['tag' => 'p', 'content' => 'Thumbnail for video']),
new \Edofre\SliderPro\Models\Thumbnail(['tag' => 'p', 'content' => 'Thumbnail 5']),
];
?>
= \Edofre\SliderPro\SliderPro::widget([
'id' => 'my-slider',
'slides' => $slides,
'thumbnails' => $thumbnails,
'sliderOptions' => [
'width' => 960,
'height' => 500,
'arrows' => true,
'init' => new \yii\web\JsExpression("
function() {
console.log('slider is initialized');
}
"),
],
]);
?>
```
### 2. Or you can create your own HTML code to generate the slider
```php
$slider = new SliderPro();
$slider->setId('my-slider');
$slider->setOptions([
'sliderOptions' => [
'width' => 960,
'height' => 500,
'arrows' => true,
'init' => new \Edofre\SliderPro\JsExpression("
function() {
console.log('slider is initialized');
}
"),
]
]);
?>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Static content
Thumbnail 4
Thumbnail 5
= $slider->generate(false); // Specify false so we don't generate a new ?>
```
## Tests
Run the tests by executing the following command:
```
composer test
```