edofre/laravel-slider-pro

Laravel widget for slider-pro

Laravel slider-pro widget

, _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

To install, either run, _(*3)

$ php composer.phar require edofre/laravel-slider-pro "v1.0.4"

or add, _(*4)

"edofre/laravel-slider-pro": "v1.0.4"

to the require section of your composer.json file., _(*5)

Note

The fxp/composer-asset plugin is required for this package to install properly. This plugin enables you to download bower packages through composer., _(*6)

You can install it using this command:, _(*7)

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., _(*8)

Configuration

Add the ServiceProvider to your config/app.php, _(*9)

'providers' => [
        ...
        Edofre\SliderPro\SliderProServiceProvider::class,
    ],

And add the facade, _(*10)

'aliases' => [
        ...
        'SliderPro' => Edofre\SliderPro\Facades\SliderPro::class,
    ],

Publish assets

Publish the assets, _(*11)

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., _(*12)

The following 2 ways are available to instantiate the slider:, _(*13)

1. You can use either the supplied php classes to generate the HTML

WIP

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' =>
            '<a class="sp-video" href="http://vimeo.com/109354891">
                <img src="http://lorempixel.com/960/500/sports/5" width="500" height="300"/>
            </a>'
        ,
    ]),
    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

$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., (*14)
        
        
        

            
Lorem ipsum dolor sit amet, (*15)

        
        
        

            
            

                Lorem ipsum dolor sit amet
            
            

                consectetur adipisicing elit
            , (*16)
            
Static content
        
        
        

            
Lorem ipsum dolor sit amet
            
consectetur adipisicing elit, (*17)
        

        
        

            
            
            
            
Thumbnail 4, (*18)
            
Thumbnail 5, (*19)
        
    



= $slider->generate(false); // Specify false so we don't generate a new 
 ?>

Tests
Run the tests by executing the following command:, (*20)


composer test