{% assign uniqe_enrolled = '' %}
<div class="heading-container">
  <div class="carousel-heading">
   Continue Learning
  </div>
</div>
<div class="continue_learning_wrapper">
    <div class="continue_learning_carousel">
        {% for course in courses.enrolled %}
            {% if course.progress > 0 and course.progress < 100 %}
                {% for category in course.categories %}
                    {% unless category.name == "HelpDoc" %}
                        {% unless uniqe_enrolled contains course.name %}
                            <div class="carousel-card-wrapper">
                                {% include 'cards_course' %}
                            </div>
                            {% assign uniqe_enrolled = uniqe_enrolled |  append: course.name |  append: ',' %}
                        {% endunless %}
                    {% endunless %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    </div>
</div>
<style>
.continue_learning_wrapper {
  position: relative;
}
</style>
<script>
$(document).ready(function() {

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