{%- if include.page.carousel.size > 0 -%}
<div id="carousel-indicators" class="carousel slide my-5" data-ride="carousel">
    <ol class="carousel-indicators">
        {%- for car in include.page.carousel limit: 1 -%}
        <li data-target="#carousel-indicators" data-slide-to="{{ forloop.index0 }}" class="active"></li>
        {%- endfor -%}
        {%- for car in include.page.carousel offset: 1 -%}
        <li data-target="#carousel-indicators" data-slide-to="{{ forloop.index }}"></li>
        {%- endfor -%}
    </ol>
    <div class="carousel-inner">
        {%- for car in include.page.carousel limit: 1 -%}
        <div class="carousel-item active">
            {%- assign src = car.src | prepend: 'carousel/' | prepend: include.page.url | prepend: '/assets' | prepend:
            site.baseurl_root -%}
            {%- capture p_x -%}{{ car.position.x | default: "center" }}{%- endcapture -%}
            {%- capture p_y -%}{{ car.position.y | default: "center" }}{%- endcapture -%}
            <img src="{{ src }}" class="d-block w-100" style="object-position: {{p_x}} {{p_y}};">
            <div class="carousel-caption">
                {%- if car.caption.titles[site.lang] -%}
                <h3>{{ car.caption.titles[site.lang] }}</h3>
                {%- elsif car.caption.title -%}
                <h3>{{ car.caption.title }}</h3>
                {%- endif -%}
                {%- if car.caption.descriptions[site.lang] -%}
                <p>{{ car.caption.descriptions[site.lang] }}</p>
                {%- elsif car.caption.description -%}
                <p>{{ car.caption.description }}</p>
                {%- endif -%}
            </div>
        </div>
        {%- endfor -%}
        {%- for car in include.page.carousel offset: 1 -%}
        <div class="carousel-item">
            {%- assign src = car.src | prepend: 'carousel/' | prepend: include.page.url | prepend: '/assets' | prepend:
            site.baseurl_root -%}
            {%- capture p_x -%}{{ car.position.x | default: "center" }}{%- endcapture -%}
            {%- capture p_y -%}{{ car.position.y | default: "center" }}{%- endcapture -%}
            <img src="{{ src }}" class="d-block w-100" style="object-position: {{p_x}} {{p_y}};">
            <div class="carousel-caption">
                {%- if car.caption.titles[site.lang] -%}
                <h3>{{ car.caption.titles[site.lang] }}</h3>
                {%- elsif car.caption.title -%}
                <h3>{{ car.caption.title }}</h3>
                {%- endif -%}
                {%- if car.caption.descriptions[site.lang] -%}
                <p>{{ car.caption.descriptions[site.lang] }}</p>
                {%- elsif car.caption.description -%}
                <p>{{ car.caption.description }}</p>
                {%- endif -%}
            </div>
        </div>
        {%- endfor -%}
    </div>
    <a class="carousel-control-prev" href="#carousel-indicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-indicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
{%- else -%}
<div class="pagetop"></div>
{%- endif -%}