README

它实现了一种新的页面类型（CarouselPage），提供了管理图像轮播所需的一切。与其他轮播图不同，这个轮播图没有座位（或插槽）的概念，因此在后端管理图像要简单得多。

您可以通过在CMS中专门的标签页（图像列表）内拖放缩略图进行批量上传和重新排列图像。相同的图像可以共享到多个轮播图中。此模块还向设置标签页添加了一些字段，允许基于页面定制轮播图的一些方面（例如，图像的宽度和高度以及显示或隐藏标题的标志）。默认情况下提供对可翻译模块的支持，即创建翻译时，新页面将借用原始轮播图像。

为了改进文件组织，如果您从轮播图上传图像，则会预先选择一个特定文件夹（如果存在！）而不是回退文件夹（Uploads）。文件夹名称取决于类层次结构。例如，如果您从CarouselPage继承HomePage类型，代码将在您的资源目录下查找任何Home或Carousel文件夹（按此顺序）。

安装

拖放重新排列功能由sortablefile模块提供，该模块必须先安装。

要安装silverstripe-carousel本身，您应按常规操作进行：将目录树放入您的SilverStripe根目录，并执行/dev/build/。您将在CMS中获得新的CarouselPage类型。

如果您使用composer，将自动拉取依赖项，因此您只需运行以下命令

composer require entidi/silverstripe-carousel

用法

此模块与前端无关，这意味着您可以通过编写适当的模板来使用您喜欢的JavaScript库。

默认情况下，在Includes中有几个模板，实现了Bootstrap（ContentCarousel_bootstrap.ss）或bxSlider（ContentCarousel_bxslider.ss）轮播图。

您可以在页面模板的任何位置包含其中之一，例如，一个基本的Bootstrap布局模板可能如下所示

<%-- Layout/CarouselPage.ss --%>
<div class="page-header">
    <h1>$Title</h1>
</div>
<% include ContentCarousel_bootstrap.ss %>
<div class="row typography">
    $Content
</div>

<%-- Include Bootstrap 3 --%>
<% require CSS("//cdn.jsdelivr.net.cn/bootstrap/3/css/bootstrap.min.css") %>
<script type="text/javascript" src="//cdn.jsdelivr.net.cn/g/jquery@1,bootstrap@3"></script>

<%-- Enable the carousel --%>
<script type="text/javascript">
    \$(document).ready(function() {
        \$('#ss-carousel').carousel();
    });
</script>

默认布局（CarouselPage.ss）嵌入了一个bxSlider轮播图。

或者，silverstrap主题已经默认支持此模块。如果您打算利用Bootstrap，请考虑使用此主题，无论是通过覆盖还是修改它。

图像标题

允许HTML标题。这是通过利用File表的Content字段（通常是空的）来内部完成的。这应该是一个HTML片段，尽管它被SilverStripe代码定义为纯文本字段。

如果启用了字幕，可以直接在“图片列表”选项卡中编辑它们，点击“编辑”按钮即可。

当未定义“Content”时，将使用带有图片标题的<h4>元素代替：有关详细信息，请参阅templates/Includes/ImageCaption.ss。

支持

该项目由^ntd开发。它的^主页与其他^{SilverStripe模块和主题共享。}

要查看代码、报告问题或提出改进建议，请访问^{专用跟踪器}。或者，您也可以通过利用官方的^GitHub仓库来完成相同的事情。

entidi / silverstripe-carousel

维护者

详细信息

README

安装

用法

图像标题

支持