description = "Carousel Section"

[viewBag]
==
<div id="carousel-area">
<div id="carousel-slider" class="carousel slide" data-ride="carousel">
   <ol class="carousel-indicators">
      {% for fields in data.section_carousel %}
      <li data-target="#carousel-slider" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %} class="active" {% endif %}></li>
      {% endfor %}
   </ol>
   <div class="carousel-inner" role="listbox">
      {% for fields in data.section_carousel %}
      {% if loop.first %}
      <div class="carousel-item active">
         {% else %}
         <div class="carousel-item">
            {% endif %}
            {% if fields.section_carousel_image %}
            <img class="img-fluid" src="{{ fields.section_carousel_image|media }}" alt="{{ fields.section_carousel_title }}">
            {% else %}
            <img class="img-fluid" src="{{ 'assets/images/img/1920x700.png'|theme }}" alt="">
            {% endif %}
            <div class="carousel-caption">
               <h2>{{ fields.section_carousel_title }}</h2>
               <h3>{{ fields.section_carousel_subtitle }}</h3>
               <a class="btn btn-lg btn-common" href="{{ fields.section_carousel_buttonlink }}"><i class="{{ fields.section_carousel_buttonicon }}"></i>{{ fields.section_carousel_buttonlabel }}</a>
            </div>
         </div>
         {% endfor %}
      </div>
      <a class="carousel-control-prev" href="#carousel-slider" role="button" data-slide="prev">
      <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carousel-slider" role="button" data-slide="next">
      <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
      </a>
   </div>
</div>