<div class="events-carousel np-carousel np-carousel-bg-blue" id="events-carousel">
    {% if items.any? %}
        {% for training_event in items %}
            <div class="np-carousel-card"> {% include "cards_training_event" with training_event %}</div>
        {% endfor %}
    {% endif %}
</div>

<script>
$(document).ready(function(){

    $(".events-carousel").slick({
        slidesToShow: 3,
        prevArrow: '<i class="fal fa-chevron-left"></i>',
        nextArrow: '<i class="fal fa-chevron-right"></i>',
        infinite: false,
        dots: false,
        arrows: true,
        responsive: [
            {
                breakpoint: 1170,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,

                }
            }
        ]
    });
});
	
</script>