How to make a multi item carousel from materialize(css) cards when the cards data is provided by a loop?
The code here generates a list of cards using the for loop. These cards are to be put in a carousel with 4 cards visible each time and a next arrow button brings the next 4 cards. I have used materialize cards.
''' <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> ''' 
One way to do this:
-
Create a
carousel-slider:<div class="carousel carousel-slider"></div> -
Create a
carousel-itemfor every 4 cards. This is a single slide, and needs also a class ofrowso that we can use the grid on the cards:<div class="carousel-item row"></div> -
Place your cards:
<div class="col s3"><div class="card blue-grey darken-1"></div></div>
And then initialise:
document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.carousel-slider'); var instances = M.Carousel.init(elems); }); 
