Question

我将根据Bootstrap默认轮播在Opencart 3中设置自定义滑块。

在我的slide.twig文件中，我有以下内容：

    {% for banner in banners %}
    <div class="item active">
      <img src="{{ banner.image }}" alt="{{ banner.title }}" />
      <div class="carousel-caption post_carousel_caption">
        <h1 data-animation="animated fadeInLeft">post page carousel</h1>
        <h2 data-animation="animated fadeInRight">with beautiful animation</h2>
      </div>
    </div>
    {% endfor %}

然后将“活动”类添加到每张幻灯片中，并且显然该滑块不起作用。在这种情况下，如何将“活动”类仅添加到当前幻灯片？

非常感谢

Answer 1

将active类添加到第一张幻灯片

{% for key, banner in banners %}
    <div class="item {{ (key == 0)?'active' }}">
      <img src="{{ banner.image }}" alt="{{ banner.title }}" />
      <div class="carousel-caption post_carousel_caption">
        <h1 data-animation="animated fadeInLeft">post page carousel</h1>
        <h2 data-animation="animated fadeInRight">with beautiful animation</h2>
      </div>
    </div>
{% endfor %}

使用{％for％}将活动类别添加到当前滑块

1 个答案: