{% assign used_instructor_names = "" %}

<div class="instructors-carousel np-carousel" id="instructors-carousel">
    {% for course in items %}
        {% for instructor in course.instructors %}
            {% unless used_instructor_names contains instructor.name %}


                 <div class="np-carousel-card">
                    <div class="instructor-slide">
                        <div class="instructor-image">
                            <img src="{{ instructor.avatar_url }}" />
                        </div>
                        <div class="instructor-info">
                            <div class="instructor-name">{{ instructor.name }}</div>
                            <a href="mailto:{{ instructor.bio }}" target="_blank" class="instructor-email">{{ instructor.bio }}</a>
                            <div class="instructor-joined">Joined in {{ instructor.created_at | date: "%Y" }}</div>
                        </div>
                    </div>
                </div>
            {% endunless %} 

            {% capture name %}{{instructor.name}},&nbsp;{% endcapture %}        
            {% assign used_instructor_names = used_instructor_names | append: name %}
        {% endfor %}    
    {% endfor %} 

</div>

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

    $(".instructors-carousel").slick({
        slidesToShow: 3.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>