Files
Gainsight/Custom_Templates/customer_templates/Scenario/_carousel_courses.html.liquid
2022-11-11 21:54:43 -05:00

62 lines
2.0 KiB
Plaintext

{% 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>