TYPO3如何在前端显示两个Carousel项目？

Question

我想在 TYPO3 的前端并排显示两项轮播，但我现在只能显示一项。

我不知道如何在 HTML 文件中使用 Fluid 编写一些代码来显示两个项目。 我现在使用插件bootstrap_package并像bootstrap_packgae的轮播一样制作轮播。 但是bootstrap_package的轮播只是幻灯片上的一个项目。

但是，我想在一个页面上显示两个项目，如果用户单击一个按钮（预览或下一步），将显示另一个项目。 我的图像是这样的：

现在我在 HTM 文件CarouselStartseiteAngebote.html （在模板中）中的代码看起来像这样：

<f:if condition="{records}">
  <div id="carousel-{data.uid}" class="carousel carousel-small carousel-startseite-angebote carousel-{data.pi_flexform.transition} slide" {f:if(condition: data.pi_flexform.interval, then: 'data-interval="{data.pi_flexform.interval}" ')}data-wrap="{f:if(condition:data.pi_flexform.wrap,then:'true',else:'false')}" data-ride="carousel" {f:if(condition: data.pi_flexform.interval, then: 'data-bs-interval="{data.pi_flexform.interval}"')} data-bs-wrap="{f:if(condition:data.pi_flexform.wrap,then:'true',else:'false')}" data-bs-ride="carousel">
    <div class="carousel-inner carousel-startseite-angebote-inner">
      <f:for each="{records}" as="item" iteration="iteration">
        <f:variable name="itemClass">item</f:variable>
          <f:if condition="{iteration.isFirst}">
             <f:variable name="itemClass">{itemClass} active</f:variable>
          </f:if>
          <f:variable name="itemClass">{itemClass} carousel-item</f:variable>
          <f:variable name="itemClass">{itemClass} carousel-item-layout-{f:if(condition: item.data.layout,then:item.data.layout,else: 'custom')}</f:variable>
          <f:variable name="itemClass">{itemClass} carousel-item-type-{item.data.item_type}</f:variable>
          <div class="{itemClass}" data-itemno="{iteration.index}">
             <f:render partial="Carousel/General/BackgroundImage" arguments="{_all}" />
             <div class="carousel-content carousel-startseite-angebote-content">
               <f:render partial="Carousel/Item/{item.data.item_type -> bk2k:format.upperCamelCase()}" arguments="{_all}" />                                
             </div>
          </div>
       </f:for>
     </div>
     <f:render partial="Carousel/Control/ControlStartseiteAngebote" arguments="{_all}" />
   </div>
</f:if>

在CarouselStartseiteAngebote.html （部分）中：

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{records -> f:count()} > 1">   
        <button data-slide="prev" data-target="#carousel-{data.uid}" data-bs-slide="prev" data-bs-target="#carousel-{data.uid}" type="button" class="carousel-control carousel-control-prev carousel-startseite-angebote-control-prev">
            <span class="startseite-angebote-icons-prev carousel-startseite-angebote-icons slidenow"></span>
            <span class="visually-hidden">{f:translate(key: 'previous', extensionName: 'rasanidesign_startseite-angebote')}</span>
        </button>
        <button data-slide="next" data-target="#carousel-{data.uid}" data-bs-slide="next" data-bs-target="#carousel-{data.uid}" type="button" class="carousel-control carousel-control-next carousel-startseite-angebote-control-next">
            <span class="startseite-angebote-icons-next carousel-startseite-angebote-icons"></span>
            <span class="visually-hidden">{f:translate(key: 'next', extensionName: 'rasanidesign_startseite-angebote')}</span>
        </button>
</f:if>
</html>

在TextAndImageForCarouselStartseiteAngebote.html （部分）中：

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}">
    <div class="carousel-sa-content">
        <!-- Slider1 -->
        <div class="carousel-startseite-angebote-content-inner-container row saslider">
            <!-- Imagefeld -->
            <div class="carousel-startseite-angebote-left col">
                <f:if condition="{item.images.0}">
                    <f:variable name="image-startseite-angeboteConfig">{settings.responsiveimages.contentelements.{data.CType}}</f:variable>
                    <f:variable name="image-startseite-angeboteConfig">{image-startseite-angeboteConfig.{item.data.item_type}}</f:variable>
                    <bk2k:data.imageVariants as="variants" variants="{variants}" multiplier="{image-startseite-angeboteConfig.multiplier}" gutters="{image-startseite-angeboteConfig.gutters}" corrections="{image-startseite-angeboteConfig.corrections}" />
                    <f:render partial="Media/Rendering/ImageStartseiteAngebote" arguments="{file: item.images.0, data: item.data, settings: settings, variants: variants}" />
                </f:if>
            </div>
            <!-- Textfeld -->
            <div class="carousel-startseite-angebote-right col">
                <div class="carousel-startseite-angebote-right-container">
                    <h{item.data.header_layout} class="carousel-startseite-angebote-header-h4 carousel-header{f:if(condition: item.data.header_class, then: ' {item.data.header_class}')}{f:if(condition: item.data.header_position, then: ' text-{item.data.header_position}')}"><f:format.htmlspecialchars doubleEncode="false">{item.data.header}</f:format.htmlspecialchars></h{item.data.header_layout}>
                <f:if condition="{item.data.subheader}">
                    <h{item.data.subheader_layout} class="carousel-startseite-angebote-header-h2 carousel-startseite-angebote-image carousel-subheader{f:if(condition: item.data.subheader_class, then: ' {item.data.subheader_class}')}{f:if(condition: item.data.header_position, then: ' text-{item.data.header_position}')}"><f:format.htmlspecialchars doubleEncode="false">{item.data.subheader}</f:format.htmlspecialchars></h{item.data.subheader_layout}>
                </f:if>
                <span class="carousel-startseite-angebote-bodytext"><f:format.html>{item.data.bodytext}</f:format.html></span>
                </div>                    
            </div>
        </div>        
    </div>
</f:link.typolink>
</html>

我应该写什么代码来并排显示两个项目？ 项目必须逐步切换，并且必须重复。

我试图在CarouselStartseiteAngebote.html的第 6 行给出一个条件：

<f:if condition="{iteration.isFirst} && {iteration.index}">

如果我使用开发人员工具检查它，那么我可以找到两个项目。 但是我不能在前端显示任何东西，即使是第一项，因为“活动”这个词已经消失了。：

如何为这两个项目添加“活动”一词？ 另外，如果出现另一个项目，如何从前一个项目中删除“活动”一词？

我希望有人能给我建议或正确的代码。 谢谢你。

Answer 1

这实际上不是一个造型的事情。 采用适合您需要的滑块插件，例如https://swiperjs.com/demos#slides-per-view并根据您的需要构建模板（html、css、js）。

Answer 2

一般来说：
网页中的特殊交互元素通常由 javascript 构建，该 javascript 采用一些标准的 HTML（如列表）并将其转换为轮播、手风琴、滑块或类似内容。

此 javascript 需要一个由类或 id 标识的容器，以便控件仅影响该元素的包含元素。

通过这种方式，您可以在一个页面中拥有两个相互独立的轮播（或类似的）。

在 TYPO3 中，您可以完全控制渲染，并可以通过添加自己的流体模板来生成您喜欢的一切。 对于唯一标识符，您可以使用内容元素或任何相关记录的uid字段。

只要您有 javascript 库来修改原始 HTML 并根据您希望的行为更改 HTML，您就可以显示任何内容。
在网络上查找一个处理您的行为的 javascript 库，将其包含在页面中，构建所需的 HTML 标记，并且不要忘记为每个元素（可能在 HTML 后面）或资产添加初始化调用viewhelper 在页面末尾的通常位置。

TYPO3如何在前端显示两个Carousel项目？

问题描述

2 个解决方案

解决方案1
0 2022-06-30 12:25:56

解决方案2
0 2022-06-30 14:07:39

TYPO3如何在前端显示两个Carousel项目？

问题描述

2 个解决方案

解决方案1 0 2022-06-30 12:25:56

解决方案2 0 2022-06-30 14:07:39

解决方案1
0 2022-06-30 12:25:56

解决方案2
0 2022-06-30 14:07:39