Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have been utilized for this implementation.
'''
<div class="row">
{% for course in course_details %}
<div class="col s3">
<div class="card medium">
<div class="card-image">
<a href="{{ course.0 }}"><img src="{{ course.0 }}" alt=""></a>
</div>
<div class="card-content">
<p>{{ course.1 }}</p>
</div>
<div class="card-action">
<a href="{{ course.1 }}">Price</a>
</div>
</div>
</div>
{%endfor%}
</div>
'''