README

Yii2 Slider Revolution jQuery Wrapper 扩展

这是一个简单的辅助器/包装器，用于 Slider Revolution（不包括在内）。

注意：Slider Revolution 并不包括在内！我必须非常清楚地说明这一点。您必须拥有 jQuery Slider Revolution 或购买它才能使用此扩展。您需要将 'rs-plugin' 目录放置在某个位置，并在配置中指向它。如果没有，或者购买了 Slider Revolution，此扩展 **将不会工作**！

为什么 Slider Revolution 不包括在内？

Slider Revolution 是一个付费插件，可以在 Theme Forest 上找到。我不能把它给你，这将是不合法的，并且违反了许多网站上的侵权条款。Slider Revolution 很棒，非常便宜（大约14美元），所以请购买它。在我看来，它制作了最好的滑块！

安装

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

运行以下命令：

$ php composer.phar require wadeshuler/yii2-sliderrevolution "@dev"

或者

"wadeshuler/yii2-sliderrevolution": "@dev"

在您的 composer.json 文件的 require 部分中。

使用方法

首先，打开您的 Yii main.php 配置文件，并将扩展添加到您的模块中。

'modules' => [
    'sliderrevolution' => [
        'class' => 'wadeshuler\sliderrevolution\SliderModule',
        'pluginLocation' => '@frontend/views/private/rs-plugin',    // <-- path to your rs-plugin directory
    ],
],

您不需要将 rs-plugin 目录放置在公开可访问的位置。Yii 将使用 AssetManager 复制它。

在您的视图文件（或布局）的顶部添加命名空间。

use wadeshuler\sliderrevolution\SliderRevolution;

然后构建数组，并输出小部件。

<?php
$slides = [
    [
        'image' => ['src' => 'path/to/slider/image.png'],
        'layers' => [
            [
                'content' => 'Layer 1'
            ],
            [
                'content' => 'Layer 2'
            ],
        ],
    ]
];

echo SliderRevolution::widget([
    'slides' => $slides
]);
?>

上面的扩展使用了内置的默认选项（略有变化）。它将根据以下示例构建滑块：[示例 Boxed](http://previous.themepunch.com/revolution4-jquery/liveguide/01.Sample-Boxed.html)

您可以在控制器内部构建数组并将它们传递到视图中，尤其是如果您需要运行特殊逻辑来渲染它们。

** 示例配置所有内容的灵活性：**

<?php
$config = ['delay' => 9000, 'startwidth' => 1170, 'startheight' => 500, 'hideThumbs' => 10, 'fullWidth' => '"on"', 'forceFullWidth' => '"on"'];
$container = ['class' => 'tp-banner-container'];
$wrapper = ['class' => 'tp-banner'];
$ulOptions = ['class' = 'my-ul'];

$slides = [
    [
        'options' => ['data' => ['transition' => 'fade', 'slotamount' => '2', 'masterspeed' => '1500']],
        'image' => ['src' => 'path/to/slider/image.png', 'options' => ['alt' => 'slidebg1', 'data' => ['bgfit' => 'cover', 'bgposition' => 'left center', 'bgrepeat' => 'no-repeat']]],
        'layers' => [
            [
                'options' => ['class' => 'tp-caption lft', 'data' => ['x' => 'center', 'y' => 'top', 'hoffset' => '0', 'voffset' => '50', 'speed' => '2500', 'start' => '1200', 'easing' => 'Power4.easeOut', 'endspeed' => '300', 'endeasing' => 'Power1.easeIn', 'captionhidden' => 'off'], 'style' => 'z-index: 6'],
                'content' => 'My Slide'
            ],
            [
                'options' => ['class' => 'tp-caption lfr', 'data' => ['x' => 'center', 'y' => 'bottom', 'hoffset' => '0', 'voffset' => '-50', 'speed' => '2500', 'start' => '1800', 'easing' => 'Power4.easeOut', 'endspeed' => '300', 'endeasing' => 'Power1.easeIn', 'captionhidden' => 'off'], 'style' => 'z-index: 6'],
                'content' => 'My Text'
            ],
        ],
    ]
];

echo SliderRevolution::widget([
    'config' => $config,
    'container' => $container,
    'wrapper' => $wrapper,
    'ulOptions' => $ulOptions,
    'slides' => $slides
]);
?>

上面的示例是全宽滑块，大多数选项都是默认值。

如果向容器传递一个 id，它将在 jQuery 监听器中使用。

在数组中传递 data 属性时，使用 data 作为键，然后是每个后缀的数组。

<div data-one="hello" data-two="world">...</div>
['data' => ['one' => 'hello', 'two' => 'world']]

这与 Yii 处理传递选项的方式相同。实际上，这些选项是传递给 Yii 以供处理的。

待办事项

更新此说明！它一团糟！