file bootstrap-carousel.html.twig

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.
Source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display a Bootstrap Carousel component.
  5. *
  6. * Available variables:
  7. * - attributes: An array of HTML attributes intended to be added to the main
  8. * container tag of this template.
  9. * - id: A valid HTML ID and guaranteed to be unique.
  10. * - controls: Flag indicating whether or not to show the carousel controls.
  11. * - indicators: Flag indicating whether or not to show the carousel indicators.
  12. * - interval: The amount of time to delay between automatically cycling a
  13. * slide item. If false, carousel will not automatically cycle.
  14. * - pause: (optional) Pauses the cycling of the carousel on mouseenter and
  15. * resumes the cycling of the carousel on mouseleave.
  16. * - slides: A list of carousel slide items containing:
  17. * - image: (required) The image to display in the slide item.
  18. * - attributes: (optional) An array of HTML attributes intended to be added
  19. * to the slide item.
  20. * - title: (optional) A title to display for the slide item.
  21. * - description: (optional) Additional helpful text to display for a slide
  22. * item.
  23. * - start_index: (optional) Alters the slide position relative to its current
  24. * position.
  25. * - wrap: (optional) Whether the carousel should cycle continuously or have
  26. * hard stops.
  27. *
  28. * @ingroup templates
  29. */
  30. #}
  31. {% set classes = ['carousel', 'slide'] %}
  32. <div{{ attributes.addClass(classes) }} data-ride="carousel" data-interval="{{ interval }}" data-pause="{{ pause }}" data-wrap="{{ wrap }}">
  33. {% if indicators %}
  34. {{ indicators }}
  35. {% endif %}
  36. <div class="carousel-inner" role="listbox">
  37. {% for slide in slides %}
  38. {% set slide_classes = ['item', start_index == loop.index0 ? 'active'] %}
  39. <div{{ slide.attributes.addClass(slide_classes) }}>
  40. {{ slide.image }}
  41. {% if slide.title or slide.description %}
  42. <div class="carousel-caption">
  43. {% if slide.title %}
  44. <h3>{{ slide.title }}</h3>
  45. {% endif %}
  46. {% if slide.description %}
  47. <p>{{ slide.description }}</p>
  48. {% endif %}
  49. </div>
  50. {% endif %}
  51. </div>
  52. {% endfor %}
  53. </div>
  54. {% if controls %}
  55. {{ controls.left }}
  56. {{ controls.right }}
  57. {% endif %}
  58. </div>

Related topics