<div class="carousel-wrapper">
    <div class="carousel">
      {% include 'featured_cards_course' %}
    </div>
</div>

<script type="module">
  var slider = tns({
    container: '.carousel',
    items: 1,
    slideBy: 'page',
    navPosition: 'bottom',
    controls: false,
    autoplay: true,
    speed: 700,
    autoplayButtonOutput: false,
    autoplayTimeout: 7000
  });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {

      var navContainer = document.querySelector('.tns-nav');
    
      var navButtons = navContainer.querySelectorAll('button');
    
      navButtons.forEach(function (button, index) {
        button.addEventListener('click', function () {
          slider.goTo(index + 1);
        });
      });
    });
  </script>

  <style>
  .carousel-wrapper {
    background: #fff;
    position: relative;
  }
  .tns-nav {
    text-align: center;
  }
  .tns-nav-active {
    background: #000 !important;
  }
  .tns-nav button {
    background: white;
    border: 1px solid #000;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0 6px;
  }
  </style>