fadriqueclickennet/slider-module

ClickennetCMS 的滑块模块

安装: 6

依赖: 0

建议: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

类型:clickennet-module

dev-master 2020-03-25 11:31 UTC

This package is auto-updated.

Last update: 2024-09-25 21:48:05 UTC


README

用法

先决条件

默认情况下,滑块模块使用 Bootstrap Carousel https://bootstrap.ac.cn/javascript/#carousel 创建,因此请确保您已加载所有标准 Bootstrap Carousel(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) !!} 渲染滑块

资源