时间戳

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

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

问题描述

此处的代码使用 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>
'''

标签： javascriptcssdjango-templatescarousel

解决方案

一种方法：

  1. 创建一个carousel-slider：

    <div class="carousel carousel-slider"></div>

  2. 每 4 张卡片创建一个carousel-item。这是一张单张幻灯片，还需要一个类，row以便我们可以使用卡片上的网格：

    <div class="carousel-item row"></div>

  3. 放置您的卡片：

<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

推荐阅读