bootstrap-carousel.html.twig in Express 8
Default theme implementation to display a Bootstrap Carousel component.
Available variables:
- attributes: An array of HTML attributes intended to be added to the main
container tag of this template.
- id: A valid HTML ID and guaranteed to be unique.
- controls: Flag indicating whether or not to show the carousel controls.
- indicators: Flag indicating whether or not to show the carousel indicators.
- interval: The amount of time to delay between automatically cycling a slide item. If false, carousel will not automatically cycle.
- pause: (optional) Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
- slides: A list of carousel slide items containing:
- image: (required) The image to display in the slide item.
- attributes: (optional) An array of HTML attributes intended to be added to the slide item.
- title: (optional) A title to display for the slide item.
- description: (optional) Additional helpful text to display for a slide item.
- start_index: (optional) Alters the slide position relative to its current position.
- wrap: (optional) Whether the carousel should cycle continuously or have hard stops.
File
themes/contrib/bootstrap/templates/bootstrap/bootstrap-carousel.html.twigView source
- {#
- /**
- * @file
- * Default theme implementation to display a Bootstrap Carousel component.
- *
- * Available variables:
- * - attributes: An array of HTML attributes intended to be added to the main
- * container tag of this template.
- * - id: A valid HTML ID and guaranteed to be unique.
- * - controls: Flag indicating whether or not to show the carousel controls.
- * - indicators: Flag indicating whether or not to show the carousel indicators.
- * - interval: The amount of time to delay between automatically cycling a
- * slide item. If false, carousel will not automatically cycle.
- * - pause: (optional) Pauses the cycling of the carousel on mouseenter and
- * resumes the cycling of the carousel on mouseleave.
- * - slides: A list of carousel slide items containing:
- * - image: (required) The image to display in the slide item.
- * - attributes: (optional) An array of HTML attributes intended to be added
- * to the slide item.
- * - title: (optional) A title to display for the slide item.
- * - description: (optional) Additional helpful text to display for a slide
- * item.
- * - start_index: (optional) Alters the slide position relative to its current
- * position.
- * - wrap: (optional) Whether the carousel should cycle continuously or have
- * hard stops.
- *
- * @ingroup templates
- */
- #}
- {% set classes = ['carousel', 'slide'] %}
- <div{{ attributes.addClass(classes) }} data-ride="carousel" data-interval="{{ interval }}" data-pause="{{ pause }}" data-wrap="{{ wrap }}">
- {% if indicators %}
- {{ indicators }}
- {% endif %}
- <div class="carousel-inner" role="listbox">
- {% for slide in slides %}
- {% set slide_classes = ['item', start_index == loop.index0 ? 'active'] %}
- <div{{ slide.attributes.addClass(slide_classes) }}>
- {{ slide.image }}
- {% if slide.title or slide.description %}
- <div class="carousel-caption">
- {% if slide.title %}
- <h3>{{ slide.title }}</h3>
- {% endif %}
- {% if slide.description %}
- <p>{{ slide.description }}</p>
- {% endif %}
- </div>
- {% endif %}
- </div>
- {% endfor %}
- </div>
- {% if controls %}
- {{ controls.left }}
- {{ controls.right }}
- {% endif %}
- </div>