Как сделать карусель с несколькими элементами из материализованных (css) карточек, когда данные карточек предоставлены al oop? - PullRequest
Новая
       124

Как сделать карусель с несколькими элементами из материализованных (css) карточек, когда данные карточек предоставлены al oop?

0 голосов
/ 14 июля 2020

Код здесь генерирует список карт с использованием l oop. Эти карты должны быть помещены в карусель, при этом каждый раз будут отображаться 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>
'''

1 Ответ

0 голосов
/ 15 июля 2020

Один из способов сделать это:

  1. Создать carousel-slider:

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

  2. Создать carousel-item на каждые 4 карты. Это один слайд, и ему также нужен класс 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

...