<div class="carousel-container">
  <div class="lp-carousel-wrapper " id="carousel-lp-enrolled">
      {% if learning_paths.available.any?%}
        <div class="lp-carousel row" >
          {% for learning_path in learning_paths.available %}
              {% include "cards_learning_path_carousel" %}
          {% endfor %}
        </div>
      {% endif %}
    </div>
</div>


  <script>
    document.querySelectorAll('.lp-carousel').forEach( x => {
      var i = 0
      
      var slider = tns({
        container: x,
        items: 3,
        controls: true,
        controlsText: ['<i class="fal fa-chevron-left left-arrow"></i>', '<i class="fal fa-chevron-right right-arrow"></i>'],
        responsive: {
          300: {
            edgePadding: 20,
            gutter: 20,
            items: 1
          },
          700: {
            gutter: 30
          },
          900: {
            items: 3
          }
        }
      });

      Array.from(x.children).forEach( y => {
        if (y.id !== '')
          i++
      });

      if (i < 4 ) {
        if (i !== 1 && window.screen.availWidth < 700) console.log("not destroyed")
        else slider.destroy() 
      }
    })
  
    </script>