README

安装

安装此扩展的首选方式是通过 composer。

安装，运行以下命令之一：

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

或添加

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

到您的 composer.json 文件的 require 部分。

注意

此包要正确安装，需要 fxp/composer-asset 插件。此插件允许您通过 composer 下载 bower 包。

您可以使用以下命令安装它：

composer global require "fxp/composer-asset-plugin:^1.3.0”

这将添加 fxp composer-asset-plugin，您的 composer 将能够找到并下载所需的 bower-asset/slider-pro 包。您可以在该页面上找到更多信息：https://packagist.org.cn/packages/fxp/composer-asset-plugin。

配置

将 ServiceProvider 添加到您的 config/app.php

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

并添加 facade

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

发布资源

发布资源

php artisan vendor:publish --tag=slider-\pro

用法

并非所有可用的模块都可作为对象使用，这些将在以后实现。如果您需要精确/精确的控制，请使用创建滑块的第二种方法。

以下两种方法可用于实例化滑块

1. 您可以使用提供的 php 类来生成 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' =>
			'<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. 或者，您可以创建自己的 HTML 代码来生成滑块

$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');
            }
        "),
        ]
]);
?>

<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <img class="sp-image" src="http://lorempixel.com/960/500/sports/1"/>
        </div>
        <!-- Slide 2 -->
        <div class="sp-slide">
            <img class="sp-image" src="http://lorempixel.com/960/500/sports/2"/>
            <p class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <!-- Slide 3 -->
        <div class="sp-slide">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <!-- Slide 4 -->
        <div class="sp-slide">
            <img class="sp-image" src="http://lorempixel.com/960/500/sports/3"/>
            <h3 class="sp-layer sp-black"
                data-position="bottomLeft" data-horizontal="10%"
                data-show-transition="left" data-show-delay="300" data-hide-transition="right">
                Lorem ipsum dolor sit amet
            </h3>
            <p class="sp-layer sp-white sp-padding"
               data-width="200" data-horizontal="center" data-vertical="40%"
               data-show-transition="down" data-hide-transition="up">
                consectetur adipisicing elit
            </p>
            <div class="sp-layer sp-static">Static content</div>
        </div>
        <!-- Slide 5 -->
        <div class="sp-slide">
            <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
            <p class="sp-layer">consectetur adipisicing elit</p>
        </div>

        <!-- thumbnails -->
        <div class="sp-thumbnails">
            <img class="sp-thumbnail" src="http://lorempixel.com/960/500/sports/1" data-src="http://lorempixel.com/480/250/sports/1"/>
            <img class="sp-thumbnail" src="http://lorempixel.com/960/500/sports/2" data-src="http://lorempixel.com/480/250/sports/2"/>
            <img class="sp-thumbnail" src="http://lorempixel.com/960/500/sports/3" data-src="http://lorempixel.com/480/250/sports/3"/>
            <p class="sp-thumbnail">Thumbnail 4</p>
            <p class="sp-thumbnail">Thumbnail 5</p>
        </div>
    </div>
</div>
<?= $slider->generate(false); // Specify false so we don't generate a new <div> ?>

测试

通过执行以下命令运行测试：

composer test