README

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

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

特别感谢

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

安装

使用 Asgard 模块下载器

可以通过运行以下命令安装模块：php artisan asgard:download:module bociancz/slider

请勿使用 bociancz/slider-module 作为包名时使用 Asgard 模块下载器。这将把模块放在 Modules/SliderModule 目录中，这是不正确的。使用 bociancz/slider 应该可以解决问题。

使用 Composer

您可以使用 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是附件的索引。
• 或者，您也可以通过指定区域$slide->getImageUrlByZone('slideImage_hover')来访问图片URL

资源

• 许可证
• Asgard 文档