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

Posted 2023-02-24

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

【英文标题】：How to make a multi item carousel from materialize(css) cards when the cards data is provided by a loop?

【发布时间】：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 " ></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>
'''

【参考方案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