WilliamsSonoma sub navigation changes.

Custom_Templates/customer_templates/Skuid/_carousel_courses.html.liquid

@@ -0,0 +1,62 @@
+{% assign topic_classname = topic | split: " " %}
+
+<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
+    {% if items.any? %}
+        {% assign sorted_items =items | sort: "name" %}
+        {% for course in sorted_items %}
+
+            {% comment %} USED FOR PROGRESS FILTER  {% endcomment %}
+            {% assign course_status = "" %}
+
+            {% if course.started? == false  %}
+                {% assign course_status = "not-started" %}
+            {% elsif course.completed?  %}
+                {% assign course_status = "completed" %}
+            {% elsif course.started?  %}
+                {% assign course_status = "in-progress" %}
+            {% endif %}
+
+            {% if topic == "Not Categorized" %}
+                <div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
+            {% else %}
+                {% for category in course.categories %}
+                    {% if category.name == topic  %}
+                        <div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
+                    {% endif %}
+                {% endfor %}
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+</div>
+
+<script>
+
+$(document).ready(function(){
+
+    $(".courses-carousel").not('.slick-initialized').slick({
+        slidesToShow: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right"></i>',
+        infinite: false,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    dots: false,
+                    arrows: true,
+                }
+            }
+        ]
+    });  
+});
+	
+</script>