{% macro imageCarousel(carouselComponentParent, carouselItems, infinite, slidesToShow, slidesToScroll, autoPlay, autoPlaySpeed, changeSlideSpeed, showArrows, showDots, customPagination, path) %}
<div id="{{carouselComponentParent}}Carousel" class="carousel {{carouselComponentParent}}__carousel {% if customPagination == 'false' %}carousel--dots{% else %}carousel--thumbs{% endif %}" data-infinite="{{infinite}}" data-slidestoshow="{{slidesToShow}}" data-slidestoscroll="{{slidesToScroll}}" data-autoplay="{{autoPlay}}" data-autoplayspeed="{{autoPlaySpeed}}" data-changeslidespeed="{{changeSlideSpeed}}" data-showarrows="{{showArrows}}" data-showdots="{{showDots}}" data-custompagination="{{customPagination}}">
    <div class="carousel__wrapper">
        {% for item in carouselItems %}
            <div class="carousel__item" data-loop="{{loop.index}}" {% if customPagination == 'true' %}data-img="{{path}}/{{item.image_thumbnail}}?format=webp"{% endif %} data-alt="{{item.image_alt}}">
                <picture>
                    <source type="image/webp" media="(max-width: 767px)"
                        srcset="{{path}}/{{item.image_mobile}}.webp?format=webp">
                    <source type="image/webp" media="(min-width: 768px)"
                        srcset="{{path}}/{{item.image_desktop}}.webp?format=webp">
                    <source type="image" media="(max-width: 767px)"
                        srcset="{{path}}/{{item.image_mobile}}?format=webp">
                    <source type="image" media="(min-width: 768px)"
                        srcset="{{path}}/{{item.image_desktop}}?format=webp">
                    <img class="carousel__image lazyload" data-src="{{path}}/{{item.image_desktop}}?format=webp"
                        alt="{{item.image_alt}}">
                </picture>
                {% if item.title != '' or item.subitle != '' %}
                <div class="carousel__textWrap">
                    {% if item.title != '' %}
                        <span class="carousel__title">{{item.title}}</span>
                    {% endif %}
                    
                    {% if item.subitle != '' %}
                        <span class="carousel__subtitle">{{item.subitle}}</span>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>

    {% if customPagination and customPagination == "true" %}
    <div class="carousel__customNav"></div>
    {% endif %}
</div>
{% endmacro %}