108 lines
2.8 KiB
Plaintext
108 lines
2.8 KiB
Plaintext
{% assign content_counter = 0 %}
|
|
|
|
{% for course in courses.in_catalog %}
|
|
{% for category in course.categories %}
|
|
{% if category.name == 'Recommended' %}
|
|
{% assign content_counter = content_counter | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% for learning_path in learning_paths.available %}
|
|
{% for category in learning_path.categories %}
|
|
{% if category.name == 'Recommended' %}
|
|
{% assign content_counter = content_counter | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% comment %}
|
|
To add for Chubb:
|
|
If person is in group show certain courses.
|
|
|
|
{% endcomment%}
|
|
<div class="recommended-carousel-wrapper">
|
|
<div class="recommended-carousel">
|
|
{% for course in courses.in_catalog%}
|
|
{% for category in course.categories %}
|
|
{% if category.name == 'Recommended' %}
|
|
<div class="carousel-card-container">
|
|
{% include "cards_course" with course %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% for learning_path in learning_paths.available %}
|
|
{% for category in learning_path.categories %}
|
|
{% if category.name == 'Recommended' %}
|
|
<div class="carousel-card-container">
|
|
{% include "cards_learning_path" %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(".recommended-carousel").slick({
|
|
infinite: true,
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
prevArrow: "<span class='prev-btn control-carousel lato'><i class='fas fa-chevron-left left-arrow'></i> Prev</span>",
|
|
nextArrow: "<span class='next-btn control-carousel lato'>Next <i class='fas fa-chevron-right right-arrow'></i></span>",
|
|
responsive: [
|
|
{
|
|
breakpoint: 768,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1000,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2
|
|
}
|
|
}
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.tns-controls {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin: 2rem 0;
|
|
gap: 25px;
|
|
margin-right: 25px;
|
|
}
|
|
[data-controls="next"], [data-controls="prev"] {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.control-carousel {
|
|
font-size: 1.25rem;
|
|
}
|
|
.left-arrow {
|
|
margin-right: 5px;
|
|
}
|
|
.right-arrow {
|
|
margin-left: 5px;
|
|
}
|
|
.recommended-carousel-wrapper {
|
|
position: relative;
|
|
}
|
|
.next-btn {
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 0;
|
|
}
|
|
.prev-btn {
|
|
position: absolute;
|
|
right: 100px;
|
|
bottom: 0;
|
|
z-index:1;
|
|
}
|
|
</style>
|
|
|