当卡片数据由循环提供时，如何从物化（css）卡片制作多项目轮播？

【问题标题】：How to make a multi item carousel from materialize(css) cards when the cards data is provided by a loop?当卡片数据由循环提供时，如何从物化（css）卡片制作多项目轮播？
【发布时间】：2020-11-04 04:35:11
【问题描述】：

此处的代码使用 for 循环生成卡片列表。这些卡片将被放入轮播中，每次可见 4 张卡片，下一个箭头按钮会带来接下来的 4 张卡片。我用了物化卡。

'''
<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>
'''

【问题讨论】：

标签： javascript css django-templates carousel

【解决方案1】：

一种方法：

创建carousel-slider：

<div class="carousel carousel-slider"></div>
为每 4 张卡片创建一个 carousel-item。这是一张单张幻灯片，还需要一个 row 类，以便我们可以使用卡片上的网格：

<div class="carousel-item row"></div>
放置卡片：

<div class="col s3"><div class="card blue-grey darken-1"></div></div>

然后初始化：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel-slider');
    var instances = M.Carousel.init(elems);   });

https://codepen.io/doughballs/pen/RwrYBYx

【讨论】：