bootstrap--simple--carousel--block.html.twig in bootstrap simple carousel 8
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-bootstrap-simple-carousel',
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
<div
id="carousel-block-generic"
class="carousel slide"
data-ride="carousel"
data-wrap="{% if settings.get('wrap') == 1 %}true{% else %}false{% endif %}"
data-interval="{{ settings.get('interval') }}"
data-pause="{% if settings.get('pause') %}hover{% endif %}"
>
<!-- Indicators -->
{% if settings.get('indicators') %}
<ol class="carousel-indicators">
{% for item in items %}
<li
data-target="#carousel-block-generic" data-slide-to="{{ loop.index - 1 }}"
class="indicator-item{{ loop.first ? ' active' : '' }}">
</li>
{% endfor %}
</ol>
{% endif %}
<!-- Wrapper for slides -->
<div class="carousel-inner">
{% for item in items %}
<div class="carousel-item item{{ loop.first ? ' active' : '' }}">
{% if item.image_link is not empty %}
<a href="{{ item.image_link }}">
{% endif %}
<img
src="{{ item.image_url }}"
class="carousel-image {{ settings.get('image_type') }}"
alt="{{ item.image_alt }}"
title="{{ item.image_title }}"
>
{% if item.image_link is not empty %}
</a>
{% endif %}
<div class="carousel-caption">
{% if item.caption_title %}<h3> {{ item.caption_title }} </h3>{% endif %}
{% if item.caption_text %}<p> {{ item.caption_text }} </p>{% endif %}
</div>
</div>
{% endfor %}
</div>
<!-- Controls -->
{% if settings.get('controls') %}
<a class="left carousel-control carousel-control-prev" href="#carousel-block-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left carousel-control-prev-icon"></span>
</a>
<a class="right carousel-control carousel-control-next" href="#carousel-block-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right carousel-control-next-icon"></span>
</a>
{% endif %}
</div>
{% endblock %}
</div>
File
templates/bootstrap--simple--carousel--block.html.twig
View source
- {%
- set classes = [
- 'block',
- 'block-' ~ configuration.provider|clean_class,
- 'block-bootstrap-simple-carousel',
- ]
- %}
- <div{{ attributes.addClass(classes) }}>
- {{ title_prefix }}
- {% if label %}
- <h2{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</h2>
- {% endif %}
- {{ title_suffix }}
- {% block content %}
- <div
- id="carousel-block-generic"
- class="carousel slide"
- data-ride="carousel"
- data-wrap="{% if settings.get('wrap') == 1 %}true{% else %}false{% endif %}"
- data-interval="{{ settings.get('interval') }}"
- data-pause="{% if settings.get('pause') %}hover{% endif %}"
- >
- <!-- Indicators -->
- {% if settings.get('indicators') %}
- <ol class="carousel-indicators">
- {% for item in items %}
- <li
- data-target="#carousel-block-generic" data-slide-to="{{ loop.index - 1 }}"
- class="indicator-item{{ loop.first ? ' active' : '' }}">
- </li>
- {% endfor %}
- </ol>
- {% endif %}
-
- <!-- Wrapper for slides -->
- <div class="carousel-inner">
- {% for item in items %}
- <div class="carousel-item item{{ loop.first ? ' active' : '' }}">
- {% if item.image_link is not empty %}
- <a href="{{ item.image_link }}">
- {% endif %}
- <img
- src="{{ item.image_url }}"
- class="carousel-image {{ settings.get('image_type') }}"
- alt="{{ item.image_alt }}"
- title="{{ item.image_title }}"
- >
- {% if item.image_link is not empty %}
- </a>
- {% endif %}
- <div class="carousel-caption">
- {% if item.caption_title %}<h3> {{ item.caption_title }} </h3>{% endif %}
- {% if item.caption_text %}<p> {{ item.caption_text }} </p>{% endif %}
- </div>
- </div>
- {% endfor %}
- </div>
-
- <!-- Controls -->
- {% if settings.get('controls') %}
- <a class="left carousel-control carousel-control-prev" href="#carousel-block-generic" data-slide="prev">
- <span class="glyphicon glyphicon-chevron-left carousel-control-prev-icon"></span>
- </a>
- <a class="right carousel-control carousel-control-next" href="#carousel-block-generic" data-slide="next">
- <span class="glyphicon glyphicon-chevron-right carousel-control-next-icon"></span>
- </a>
- {% endif %}
- </div>
- {% endblock %}
- </div>