README

重要：AsgardCMS v1 和 v2 的滑块模块不再维护

对于 Asgard v1，使用标记为 0.x 的版本，对于 Asgard v2，使用标记为 2.x 的版本。如果您想使用最新功能，请升级 Asgard 到 v3（有关详细信息，请参阅发布中的更改日志）

特别感谢

感谢 Nicolas Widart 为 AsgardCMS 及其菜单模块，这是滑块模块的基础。感谢所有为此模块做出贡献的其他贡献者

安装

您可以使用 composer 安装滑块模块：composer require bociancz/slider-module

模块安装后，滑块迁移和前端资源应该会自动安装。如果它们没有安装，您可以手动运行以下命令

安装滑块迁移 php artisan module:migrate Slider
发布前端资源 php artisan module:publish Slider

不要忘记在 AsgardCMS 中给自己授权（使用角色/权限）。新的滑块项目将出现在侧边栏中

使用方法

先决条件

默认情况下，滑块模块使用 Bootstrap Carousel 创建，因此请确保您已加载所有标准 Bootstrap 滚动条（Bootstrap Carousel CSS 和 JS）的先决条件

基本用法

您可以使用 AsgardCMS 管理界面创建基本的滑块 - 您可以创建并命名您的滑块（请注意此处的 系统名称 字段，它将在以后用于渲染），并创建单独的幻灯片。幻灯片可以链接到媒体模块中的图像，或具有指向外部图像的 URL。它们还可以包含指向网站任何页面的超链接，固定 URI 或 URL。

当滑块创建完成后，您可以使用 {!! Slider::render('slider_system_name') !!} 在模板中渲染它

高级用法

使用您自己的滑块模板

如果您想更改滑块的渲染方式，使用自定义 HTML、CSS 类等，您可以将 Blade 模板名称作为 render() 方法的第二个参数传递，例如 {!! Slider::render('slider_system_name', 'slider/my-own-slider') !!}

模板可能看起来像这样

{-- Themes/MyTheme/views/slider/my-own-slider.blade.php --}
<div id="{{ $slider->system_name }}" class="my-own-slider-class">

    @foreach($slider->slides as $index => $slide)
        <div class="slide">
            <a href="{{ $slide->getLinkUrl() }}">
                <img src="{{ $slide->getImageUrl() }}" />
            </a>
        </div>
    @endforeach
    
</div>

您将在 $slider 变量中有一个可用的 Modules\Slider\Entities\Slider 实例

提供您自己的滑块实例

您还可以将 Modules\Slider\Entities\Slider 实例作为第一个参数传递，而不是滑块的 system_name，以渲染动态创建的滑块。

首先，创建滑块实例并在控制器中添加幻灯片，然后将其传递到视图中

<?php
...
// import classes needed to create your own instance
use Modules\Slider\Entities\Slider;
use Modules\Slider\Entities\Slide;

class HomepageController {
    ...
    /**
     * controller method
     */
    public function displayHomepage()
    {
        // make a new Slider instance
        $mySlider = new Slider;
        $mySlider ->system_name = 'custom_slider';
        
        // create slide 1
        $slide1 = new Slide;
        $slide1->title = 'First Slide';
        $slide1->caption = 'First slide text';
        $slide1->external_image_url = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Slide1&w=800&h=300';
        
        // create slide 2
        $slide2 = new Slide;
        $slide2->title = 'Second Slide';
        $slide2->caption = 'Second slide text';
        $slide2->external_image_url = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Slide2&w=800&h=300';
        
        // add slides to slider
        $mySlider->slides->add($slide1);
        $mySlider->slides->add($slide2);
        
        // render view
        return View::make('homepage')
            ->with('mySlider', $mySlider);
    }

然后，在 homepage.blade.php 模板内部，您可以使用 {!! Slider::render($mySlider) !!} 渲染滑块

在幻灯片背景上使用 YouTube 视频（仅支持 Bootstrap4）

您可以为每个幻灯片提供 YouTube 视频链接。当使用默认的 Bootstrap 4 模板时，此视频将在背景上播放。

如果同时提供了图像，则它将在视频播放器加载之前作为幻灯片背景显示（默认延迟设置为 2 秒）

所有样式和JavaScript都包含在Blade模板中（youtube-video-slide.blade.php），有关原始解决方案的详细信息，请参阅https://www.powderkegwebdesign.com/implementing-youtube-background-videos/

!!! 在使用背景视频时，目前只能在单个幻灯片上使用。多个幻灯片上的视频将无法播放 !!!

允许每个滑块使用多个图像

有时，能够为每个幻灯片上传多个图像很有用（例如，用于悬停效果等）。滑块模块可配置以支持此用例

首先，发布滑块模块的配置 php artisan module:publish-config Slider。这将把滑块模块的配置文件复制到 /config/asgard/slider/
打开 /config/asgard/slider/config.php 文件
查找 slide-images 配置块，默认情况下看起来像这样

'slide-images' => [
    'slideImage',
]

您可以在 slide-images 数组中添加更多项目，然后它们将被添加到创建/编辑幻灯片表单中

'slide-images' => [
    'slideImage',
    'slideImage_hover',
    'slideImage_alternative',
]

（您将为每个幻灯片附加三种不同的图像）

然后您可以通过调用 $slide->getImageUrl(1) 在模板中访问图像，其中1是附件的索引。
或者，您也可以通过指定区域来访问图像URL $slide->getImageUrlByZone('slideImage_hover')

micvital / slider-module

维护者

详情