<section class="productCarousel"
    data-list-name="{{list}}"
    data-slick='{
        "infinite": false,
        "mobileFirst": true,
        "slidesToShow": 2,
        "slidesToScroll": 2,
        "slide": "[data-product-slide]",
        "responsive": [
            {
                "breakpoint": 800,
                "settings": {
                    "slidesToShow": {{ columns }},
                    "slidesToScroll": {{ columns }}
                }
            },
            {
                "breakpoint": 550,
                "settings": {
                    "slidesToShow": 3,
                    "slidesToScroll": 3
                }
            }
        ]
    }'
>
    {{#each products}}
    <div data-product-slide class="productCarousel-slide">
        {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
    </div>
    {{/each}}
    {{#if products.length '>' 1}}
        {{> components/carousel-content-announcement}}
    {{/if}}
</section>
