<!– Carousel Wrapper –> <div id=“carousel-example-1z” class=“carousel slide carousel-fade carousel-half” data-ride=“carousel”>
<!-- Indicators --> {% assign carousel_backgrounds = site.data.blog.list.carousel_backgrounds | default: site.data.default.blog_carousel_backgrounds %} <ol class="carousel-indicators"> {% assign j =0 %} {% for item in carousel_backgrounds %} {% assign j = j | plus:1%} <li data-target="#carousel-example-1z" data-slide-to="{{j-1}}" {% if j==1 %}class="active" {%endif %}></li> {% endfor %} </ol> <!-- Indicators --> <!-- Slides --> <div class="carousel-inner" role="listbox"> {% assign j =0 %} {% for item in carousel_backgrounds %} {% assign j = j|plus:1%} <!-- First slide --> <div class="carousel-item {% if j==1 %}active {% endif %}"> <div class="view h-100"> <img class="d-block h-100 w-lg-100" src="{{ item.image }}" alt="First slide"> <div class="mask rgba-black-light"></div> </div> </div> {% endfor %} <!-- First slide --> <!-- Second slide --> </div> <!-- Slides --> <!-- Controls --> <a class="carousel-control-prev" href="#carousel-example-1z" 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-1z" 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 -->