bmen-jekyll/_includes/elements/carousel.html

41 lines
1.3 KiB
HTML

{%- assign images = carousel_images | strip | newline_to_br | split: '<br />' -%}
<div id="carouselExampleIndicators" class="carousel slide" data-ride="false">
<ol class="carousel-indicators">
{% for image in images %}
{%- if forloop.first -%}
<li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.index0}}" class="active"></li>
{%- else -%}
<li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.index0}}"></li>
{%- endif -%}
{% endfor %}
</ol>
<div class="carousel-inner">
{% for image in images %}
{%- if forloop.first -%}
<div class="carousel-item active">
<img src="{{ image }}" class="d-block w-100">
</div>
{%- else -%}
<div class="carousel-item">
<img src="{{ image }}" class="d-block w-100">
</div>
{%- endif -%}
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>