aleph1.co.uk Git - yaffs-website/blob - web/themes/contrib/bootstrap/templates/bootstrap/bootstrap-carousel.html.twig

   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>