README

描述

此模块用于将 Bootstrap Carousel 实现到 SilverStripe 项目中，并能够从 CMS 管理界面管理其中显示的图片。

注意：此模块适用于设计师/开发者。不建议用于内容编辑器，因为他们将需要访问页面模板（例如，PageName.ss）以正确实现轮播，并设置 CSS 样式。

作者

此模块由 Creative Gorillas (Sajan Sharma) 创建。该模块基于 i-lateral 创建的 "i-lateral/silverstripe-carousel" 模块。

安装

手动安装

• 下载 Zip 文件
• 解压 Zip 文件
• 找到 Zip 文件中的文件夹
• 将文件夹重命名为 carousel
• 将此 carousel 文件夹放置在您的项目根目录中
• 运行 http://yoursiteurl/dev/build?flush=1

Composer 安装

composer require sajansharmanz/silverstripe-bootstrap-carousel

• 运行 http://yoursiteurl/dev/build?flush=1

注意：您需要正确在项目中实现 Bootstrap，以便它能够工作

用法

成功安装并正确实现 Bootstrap 框架后，我们就可以将轮播图应用到页面上。

将轮播图添加到页面

• 登录到 SilverStripe 管理界面
• 从网站树中选择您希望应用轮播图的页面
• 在此页面的“设置”选项卡中，通过从下拉菜单中选择“是”启用轮播图，询问“显示轮播图？”
• 点击保存并发布（非常重要！）

向轮播图添加图片

• 返回页面的“内容”选项卡
• 选择称为“轮播图”的子选项卡，它现在应显示在“主内容”子选项卡旁边。您可以在其中添加/删除轮播图中的图片
• 点击“添加图片”按钮
• 添加标题（可选）
• 如果您的轮播图有 CTA，请添加按钮文本（可选）
• 如果您有 CTA，请选择单击后将导航到的网站上的页面（可选）
• 选择是否在新浏览器页面上打开此页面（可选）
• 选择要添加到轮播图的图片
• 添加排序号 - 这是图片在轮播图中的显示顺序（例如，1 = 第 1 位，2 = 第 2 位，3 = 第 3 位等）。如果两个元素具有相同的排序号，则首先收到它的元素将首先显示

将轮播图添加到模板：现在您已将轮播图添加到页面并提供了图片，我们必须进行最后一步才能使其在页面上显示。

• 我们必须将 <% include CarouselImages %> 添加到您想要显示轮播图的页面类型（例如，Page.ss、HomePage.ss 等）

• 我们还需要将以下行添加到页面类型末尾，在关闭 body 标签之前。这将使用 jQuery 将活动类添加到轮播图中的第一个 item

<script type="text/javascript">
	$(document).ready(function() {
		$('#carousel').find('.item').first().addClass('active');
		$('#carousel').find('.indicator-pos').first().addClass('active');
	});
</script>

许可证

此模块可在 BSD 3 条款许可下使用

附加信息

要使此轮播图工作，您需要在项目中添加 Bootstrap 框架。此外，建议您通过 CSS 为轮播图添加自定义样式。您可以点击此处查看 Creative Gorillas 在项目中如何实现此功能：点击这里

这是我创建 SilverStripe 模块的第一尝试，i-lateral 模块被用作指导，此模块是使用 Bootstrap 框架对该模块的改编。我已经测试了此模块，并且它运行正常，但是如果您发现任何错误或缺陷，请告诉我。

祝您好运，享受编程！