PHPackages                             edofre/yii2-slider-pro - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. edofre/yii2-slider-pro

ActiveYii2-extension[Utility &amp; Helpers](/categories/utility)

edofre/yii2-slider-pro
======================

Yii2 widget for slider-pro

V1.1.6(9y ago)112.7k↓87.5%3MITPHPPHP &gt;=5.5.0

Since Jun 20Pushed 8y ago1 watchersCompare

[ Source](https://github.com/Edofre/yii2-slider-pro)[ Packagist](https://packagist.org/packages/edofre/yii2-slider-pro)[ Docs](https://github.com/edofre/yii2-slider-pro)[ RSS](/packages/edofre-yii2-slider-pro/feed)WikiDiscussions master Synced today

READMEChangelog (6)Dependencies (4)Versions (10)Used By (0)

Yii2 slider-pro widget
======================

[](#yii2-slider-pro-widget)

[![Latest Stable Version](https://camo.githubusercontent.com/9c876ef39fede6ebdc7a5e23ce928a50cebb38b12bd77d2f3fbdd610e9da5a52/68747470733a2f2f706f7365722e707567782e6f72672f65646f6672652f796969322d736c696465722d70726f2f762f737461626c65)](https://packagist.org/packages/edofre/yii2-slider-pro)[![Total Downloads](https://camo.githubusercontent.com/31fc4e9f600e2e3ab3f165816e22aa0f6049797e88b0df45c2d44ef0151ba990/68747470733a2f2f706f7365722e707567782e6f72672f65646f6672652f796969322d736c696465722d70726f2f646f776e6c6f616473)](https://packagist.org/packages/edofre/yii2-slider-pro)[![Latest Unstable Version](https://camo.githubusercontent.com/880ebe660911619ff2a62ec905dbf475663c22d316de74130f5097c959c78037/68747470733a2f2f706f7365722e707567782e6f72672f65646f6672652f796969322d736c696465722d70726f2f762f756e737461626c65)](https://packagist.org/packages/edofre/yii2-slider-pro)[![License](https://camo.githubusercontent.com/131bb787418b95efb6d382f3ebdc7d4fc7d2f3694e1dd1f672dfa8d617c0c5d5/68747470733a2f2f706f7365722e707567782e6f72672f65646f6672652f796969322d736c696465722d70726f2f6c6963656e7365)](https://packagist.org/packages/edofre/yii2-slider-pro)[![composer.lock](https://camo.githubusercontent.com/849c8604c25d19682ec30fb250412cfdb3b691a0480c9e03babf6e74a78522c8/68747470733a2f2f706f7365722e707567782e6f72672f65646f6672652f796969322d736c696465722d70726f2f636f6d706f7365726c6f636b)](https://packagist.org/packages/edofre/yii2-slider-pro)

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

To install, either run

```
$ php composer.phar require edofre/yii2-slider-pro "V1.1.6"

```

or add

```
"edofre/yii2-slider-pro": "V1.1.6"

```

to the `require` section of your `composer.json` file.

Usage
-----

[](#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

[](#1-you-can-use-either-the-supplied-php-classes-to-generate-the-html)

```
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']),
];
?>
