<!--Start: Carousel Section -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators/dots -->
	
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
		{% for key, slider_contents in elements.content.slider_content %}
		  {% if loop.index == '1'  %}
				{% set class = 'active' %}
			{% else %}
				{% set class = '' %}
			{% endif %}
      <div class="carousel-item {{ class }}" data-bs-interval="10000">
        {{ slider_contents|raw }}
     </div>
		{% endfor %}
  </div>
  
  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>
<!--End: Carousel Section -->
