www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/views_bootstrap/templates/views-bootstrap-carousel.html.twig

   1 {#
   2 /**
   3  * @file
   4  * Default theme implementation for displaying a view as a bootstrap carousel.
   5  *
   6  * Available variables:
   7  * - view: The view object.
   8  * - rows: A list of the view's row items.
   9  * - id: A valid HTML ID and guaranteed to be unique.
  10  * - interval: The amount of time to delay between automatically cycling a
  11  *   slide item. If false, carousel will not automatically cycle.
  12  * - pause: Pauses the cycling of the carousel on mouseenter and
  13  *   resumes the cycling of the carousel on mouseleave.
  14  * - wrap: Whether the carousel should cycle continuously or have
  15  *   hard stops.
  16  *
  17  * @see template_preprocess_views_bootstrap_carousel()
  18  *
  19  * @ingroup themeable
  20  */
  21 #}
  22 <div id="{{ id }}" class="carousel slide" data-ride="carousel" data-interval="{{ interval }}" data-pause="{{ pause }}" data-wrap="{{ wrap }}">
  23
  24   {# Carousel indicators #}
  25   {% if indicators %}
  26     <ol class="carousel-indicators">
  27       {% for key, row in rows %}
  28         {% set indicator_classes = [loop.first ? 'active'] %}
  29         <li class="{{ indicator_classes|join(' ') }}" data-target="#{{ id }}" data-slide-to="{{ key }}"></li>
  30       {% endfor %}
  31     </ol>
  32   {% endif %}
  33
  34   {# Carousel rows #}
  35   <div class="carousel-inner" role="listbox">
  36     {% for row in rows %}
  37       {% set row_classes = ['item', loop.first ? 'active'] %}
  38       <div class="{{ row_classes|join(' ') }}">
  39         {{ row.image }}
  40         {% if row.title or row.description %}
  41           <div class="carousel-caption">
  42             {% if row.title %}
  43               <h3>{{ row.title }}</h3>
  44             {% endif %}
  45             {% if row.description %}
  46               <p>{{ row.description }}</p>
  47             {% endif %}
  48           </div>
  49         {% endif %}
  50       </div>
  51     {% endfor %}
  52   </div>
  53
  54   {# Carousel navigation #}
  55   {% if navigation %}
  56     <a class="left carousel-control" href="#{{ id }}" role="button" data-slide="prev">
  57       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  58       <span class="sr-only">{{ 'Previous'|t }}</span>
  59     </a>
  60     <a class="right carousel-control" href="#{{ id }}" role="button" data-slide="next">
  61       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  62       <span class="sr-only">{{ 'Next'|t }}</span>
  63     </a>
  64   {% endif %}
  65 </div>