README

显示基本 Slick Carousel 的块
(私有项目，不提供帮助/支持)

要求

• SilverStripe CMS ^5
• dnadesign/silverstripe-elemental ^4 || ^5
• silverstripe/linkfield ^4
• jonom/focuspoint ^5
• symbiote/silverstripe-gridfieldextensions ^4

重要
您必须自己将 Slick CSS/JS 文件和 jQuery 添加到您的项目中。
您还必须自己初始化轮播（例如$('.element-slick-slider').slick({rows: 0});）。
包含了一些 Bootstrap 5 的示例模板，您可以根据需要调整它们。

建议

• derralf/elemental-styling

当使用 derralf/elemental-styling 中的 StyledTitle 时，将 /templates/Derralf/Elements/Slickslider/Includes/Title.ss 修改为您所需的内容。

安装

• 通过 Composer 安装模块

  composer require derralf/elemental-slickslider
  

配置

一个基本/默认配置。将此添加到您的 mysite/_config/elements.yml 中，并根据需要注释/取消注释/添加/删除/修改所需的行

注意 styles 和 image_view_modes 的选项，其中列出了扩展中包含的模板。

您可以选择将 defaults:Style 设置为任何可用的 styles。

---
Name: elementalslickslider
---
Derralf\Elements\SlickSlider\Element\ElementSlickSliderHolder:
  slick_carousel_default_config: '{"speed":200,"dots":false,"infinite":true,"slidesToShow":5,"centerMode":false,"variableWidth":false,"adaptiveHeight":true,"responsive":[{"breakpoint":1200,"settings":{"slidesToShow": 1}},{"breakpoint":992,"settings":{},{"breakpoint":768,"settings":{}},{"breakpoint":600,"settings":{}}]}'
  # add StyledTitle
  extensions:
    - Derralf\ElementalStyling\StyledTitle
  # disable StyledTitle
  title_tag_variants: null
  title_alignment_variants: null
  # styles
  style_default_description: 'Standard: 100% Content-Breite'
  styles:
    BS5RightFiftyFifty: "BS5 Slider rechts, 50%"
    BS5LeftFiftyFifty: "BS5 Slider links, 50%"

Derralf\Elements\SlickSlider\Model\ElementSlickSliderItem:
  use_content: true
  readmore_link_class: 'btn btn-sm btn-primary btn-readmore'
  styles:
    default: 'default'
    bottom-left: 'links unten'
    center-center: 'zentriert'
    grey: 'grau'
    primary: 'petrol'
    primary-dark: 'petrol dunkel'
    secondary: 'grün'
  

此外，您还可以应用默认样式

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    - derralf/elemental-slickslider:client/dist/styles/frontend-default.css

有关禁用默认样式的说明，请参阅 Elemental 文档：如何禁用默认样式。

添加您自己的模板

包含了一些 Bootstrap 5 的示例模板。
您可以添加自己的模板/样式，例如

Derralf\Elements\SlickSlider\Element\ElementSlickSliderHolder:
  styles:
    MyCustomTemplate: "new customized special Layout"

...并将一个名为 ElementSlickSliderHolder_MyCustomTemplate.ss 的模板放入 themes/{your_theme}/templates/Derralf/Elements/SlickSlider/Element/
和/或 向您的样式表添加对 .derralf__elements__slickslider__element__elementslicksliderholder.mycustomtemplate 的样式

模板说明

包含的模板基于 Bootstrap 5，但可能需要额外的/附加的样式（请参阅包含的样式表）。

• 可选地，您可以在控制器类中需要此模块提供的 CSS 样式，例如：mysite/code/PageController.php

      Requirements::css('derralf/elemental-slickslider:client/dist/styles/frontend-default.css');
  

  或复制并修改您的主题 scss 中的 client/src/styles/frontend-default.scss

屏幕截图

(不可用)