TWIG template for bootstrap carousel


#1

I’m trying to create a template for bootstrap 4 carousel. https://getbootstrap.com/docs/4.0/components/carousel/ Each segment of the carousel is a series, there are 6 images in a row. I think about something like this:

TWIG
    {% set image = page.media.images %}<div class="carousel-inner" id="logos" role="listbox">
        <div class="carousel-item active">
            <div class="block py-5">
                <div class="container">
                    {% for row in page.header.rows %}
                    <div class="row d-flex align-items-center">
                        {% if row.image %}
                        <div class="col-4 col-sm-2">
                            {{ row.image.html('', '', 'w-100 d-block img-fluid') }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

and markdown header:

markdown
> ---
> title: Partners
> rows:
>   - image: 1.png
>     image: 2.png
>     image: 3.png
>     image: 4.png
>     image: 5.png
>     image: 6.png
>   - image: 7.png
>     image: 8.png
>     image: 9.png
>     image: 10.png
>     image: 11.png
>     image: 12.png
> ---

But this is the wrong way. Can anybody explain how to organize the nested structure. An array of rows in which an array of images.


#2

Here are three ways to build a nested list in YAML:

-
  - 1
  - 2
  - 3
- 
  - 4
  - 5
  - 6
- - 1
  - 2
  - 3
- - 4
  - 5
  - 6
- [1,2,3]
- [4,5,6]