Multiple items in bootstrap carousel `carousel-item` using Twig/Timber/Wordpress and Bootstrap 4

Question

what I want is that each carousel-item hold card group with 3 cards inside .. so .. in this particular case, there are 8 related posts, it would like this .. *[(1)(2)(3)] -> [(4)(5)(6)] -> [(7)(8) ]

[Twig file]

{% set division = (related|length - 1)/ 3 %}

{% from _self import post_cards %}


 <div class="container">

    <div id="carouselExampleIndicators" class="carousel slide">
      <ol class="carousel-indicators">
        {% for i in 0..division %}
          <li data-target="#carouselExampleIndicators" data-slide-to="{{ i }}" class="{{ i == 0 ? 'active' : ''}}"></li>
        {% endfor %}
      </ol>

      {# -- inner elements --  #}
      <div class="carousel-inner bg-warning">
      {% for post in related %}
    
        {% if (loop.index0 is divisible by(3)) or (loop.first) %}
          <div class="carousel-item {{ loop.first ? 'active' : ''}}"> {# d-flex #}
            <div class="card-group w-100">
        {% endif %}

        {{ post_cards('col-md-4 my-4', post)}}

        {% if (loop.index0 is divisible by(3)) or (loop.first) %}
            </div>
          </div>
        {% endif %} 

      {% endfor %}
      </div>
      {# --- end of inner elements --- #}
    </div>

  </div>{# END container --- #}


{# --- card macro #}
{% macro post_cards(classes, post) %}
  <div class="{{ classes }}">
    <div class="card h-100">
      <a class="text-decoration-none blog-card-link h-100" alt="Link to blog post" role="button"
        target="_self" href="{{ post.link }}">
        <img src="{{ post.thumbnail.src }}" class="card-img-top my-0" alt="Image for {{ post.title }}">
        <div class="card-body">
          <p class="post-category font-weight-medium">{{ post.category }}</p>
          <h3 class="card-title font-weight-bold">{{ post.title }}</h3>
          <p class="card-text">
            {% set post_preview = post.meta('on_blog_list') %}
            {{ post_preview ? post_preview|truncate(10) : post.preview.length(10).read_more(null) }}
          </p>
        </div>
        <div class="card-footer bg-transparent border-0">
          <span class="blog-date">
          {{ post.date }}
          </span>
          <a class="d-inline btn-link arrow-link float-right"
            alt="Read more" role="button"
            target="_self" href="{{ post.link }}">
            read
          </a>
        </div>
      </a>
    </div>
  </div>
{% endmacro post_cards %}

..generates following

code above generates this

so cards fall outside the carousel-item

score 0 · Accepted Answer · answered Jul 20 '20 at 13:23

You have same condition for opening and closing div. Try something like this.

            {# -- inner elements --  #}
            <div class="carousel-inner bg-warning">
                {% set x = 0 %}
                {% for post in 1..15 %}
                    {% set x = x + 1 %} 
                    {% if x == 1 %} {# opening div on 1st item #}
                        <div class="carousel-item {{ loop.first ? 'active' : ''}}"> {# d-flex #}
                        <div class="card-group w-100">
                    {% endif %}

                     {{ post_cards('col-md-4 my-4', post)}}

                    {% if x == 3 %} {# closing div after 3rd item #}
                        </div>
                        </div>
                        {% set x = 0 %} 
                    {% endif %}

                {% endfor %}
            </div>
            {# --- end of inner elements --- #}

Multiple items in bootstrap carousel `carousel-item` using Twig/Timber/Wordpress and Bootstrap 4

1 Answers1