layout: default
{% assign background_images = site.data.carousel.background_images | default: site.data.default.main_carousel_backgrounds %}
{% for i in (1..background_images.size) %} {% assign j = i | minus:1 %} <style> .carousel-item:nth-child({{i}}) {
background-image: url("{{ background_images[j].src }}"); background-repeat: no-repeat; background-size: cover; background-position: center center;
}</style> {% endfor %}
<!–Carousel Wrapper–> <div id=“carousel-example-2” class=“carousel slide carousel-fade” data-ride=“carousel” data-interval=“false”>
<!--Indicators--> <ol class="carousel-indicators"> {% for i in (1..background_images.size) %} <li data-target="#carousel-example-2" data-slide-to="{{i}}" {% if i==1 %} active {% endif %}></li> {% endfor %} </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> {% for i in (1..background_images.size) %} <div class="carousel-item {% if i==1 %} active {% endif %}"> <!--Mask color--> <div class="view"> {% include carousel-contents.html %} <!--/Mask color--> </div> </div> {% endfor %} <!--Controls--> <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> <main> {{ content }} </main>