
<div class="my-courses-carousel">
  {% for course in courses.enrolled %}
    <div class="course-slide">
    {% include "cards_course" with course %}
    </div>
  {% endfor %}
</div>
<div class="courses-carousel-controls carousel-controls">
  <div class="carousel-arrow far fa-chevron-left"></div>
  <div class="carousel-arrow far fa-chevron-right"></div>
</div>

<style>
  .course-slide .np-card {
    padding: 0 8px;
  }

 
</style>


<script>
  var slider = tns({
    container: '.my-courses-carousel',
    items: 1,
    controlsContainer: document.querySelector(".courses-carousel-controls"),
    mouseDrag: true,
    autoplay:false,
    controls:true,
    gutter:16,
    navPosition:'bottom',
    loop: true,
    nav: false,
    responsive: {
      640: {
        items: 2
      },
      900: {
        items: 3
      },
      1200: {
        items: 4,
      }
    }
  });
</script>