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 {{ attach_library('views_bootstrap/components') }}
  23
  24 <div id="{{ id }}" class="carousel slide" data-ride="carousel" data-interval="{{ interval }}" data-pause="{{ pause }}" data-wrap="{{ wrap }}">
  25
  26   {# Carousel indicators #}
  27   {% if indicators %}
  28     <ol class="carousel-indicators">
  29       {% for key, row in rows %}
  30         {% set indicator_classes = [loop.first ? 'active'] %}
  31         <li class="{{ indicator_classes|join(' ') }}" data-target="#{{ id }}" data-slide-to="{{ key }}"></li>
  32       {% endfor %}
  33     </ol>
  34   {% endif %}
  35
  36   {# Carousel rows #}
  37   <div class="carousel-inner" role="listbox">
  38     {% for row in rows %}
  39       {% set row_classes = ['item', loop.first ? 'active'] %}
  40       <div class="{{ row_classes|join(' ') }}">
  41         {{ row.image }}
  42         {% if row.title or row.description %}
  43           <div class="carousel-caption">
  44             {% if row.title %}
  45               <h3>{{ row.title }}</h3>
  46             {% endif %}
  47             {% if row.description %}
  48               <p>{{ row.description }}</p>
  49             {% endif %}
  50           </div>
  51         {% endif %}
  52       </div>
  53     {% endfor %}
  54   </div>
  55
  56   {# Carousel navigation #}
  57   {% if navigation %}
  58     <a class="left carousel-control" href="#{{ id }}" role="button" data-slide="prev">
  59       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  60       <span class="sr-only">{{ 'Previous'|t }}</span>
  61     </a>
  62     <a class="right carousel-control" href="#{{ id }}" role="button" data-slide="next">
  63       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  64       <span class="sr-only">{{ 'Next'|t }}</span>
  65     </a>
  66   {% endif %}
  67 </div>