<div class="carousel">
    <div class="my-learning-path-carousel">
        {% for learning_path in learning_paths.enrolled %}
            <div class="card-wrapper">
                {% include "cards_learning_path_homepage" with learning_path %}
            </div>
          {% endfor %}
    </div>
</div>

<script>
    $('.my-learning-path-carousel').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
    nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>"
    });
</script>

<style>
    .slick-track {
        display: flex;
    }
    .card {
        height: 100%;;
    }
    .card-wrapper {
        padding: 1rem 0;
        height: auto;
    }
    .my-learning-path-carousel {
        margin: 0 1rem;
    }
</style>