Как сделать карусель / слайдер для продукта, используя Bootstrap 4 и Django

Question

Я пытаюсь создать слайдер отображения продукта в Django и пока считаю его невозможным. Ранее я успешно создавал слайдеры и карусели на сайтах stati c, но по какой-то причине попытаться сделать это с помощью динамической c информации с использованием Django очень сложно.

Я надеюсь создать слайдер, состоящий из Bootstrap карточек, с верхним изображением, названием и ценой для некоторых продуктов в рамках побочного проекта, который я делаю для практики изучения Django и веб-разработки ,

Цель состоит в том, чтобы отображать три карты на слайд (т.е. три отдельных продукта), максимум 5 слайдов, то есть всего не более 15 продуктов для всей карусели.

Название карусели будет «Последние продукты», и каждый раз, когда я добавляю объект продукта в базу данных, «первая» карта будет показывать этот объект, а последняя карта (или самый старый продукт) будет оттолкнулся от конца карусели, чтобы мы не go превышали максимум 15 карт во всей карусели.

Эта карусель будет отображаться на домашней странице.

Пока что у меня есть представление для домашней страницы:

class LatestProductsView(ListView):
    model = Product.objects.all()
    template_name = 'products/home.html'

Модель выглядит следующим образом:

class Product(CommonInfo):

    main_category = models.CharField(choices=TOY_CATEGORY_CHOICES, max_length=2, default='FW')
    additional_category = models.CharField(choices=TOY_CATEGORY_CHOICES, max_length=2, blank=True)
    brand = models.CharField(choices=TOY_BRAND_CHOICES, max_length=2, default='NB', blank=True)

    def __str__(self):
        return self.title

    class Meta:
        ordering = ['-date_added']


    def get_absolute_url(self):
        return reverse("products:product-detail", kwargs={
            'slug': self.slug
        })

    def get_add_to_cart_url(self):
        return reverse("add-to-cart", kwargs={
            'slug': self.slug
        })

    def get_remove_from_cart_url(self):
        return reverse("remove-from-cart", kwargs={
            'slug': self.slug
        })

, который на самом деле происходит от основной модели, которая выглядит следующим образом:

class CommonInfo(models.Model):
    slug = models.SlugField(unique=True)
    image = models.ImageField(upload_to='media')
    title = models.CharField(max_length=150)
    description = models.TextField()
    short_description = models.CharField(max_length=300)
    price = models.DecimalField(max_digits=5, decimal_places=2)
    discount_price = models.DecimalField(max_digits=5, decimal_places=2, blank=True, null=True) 
    stock_quantity = models.PositiveIntegerField(default=10)
    in_stock = models.BooleanField(default=True)
    on_sale = models.BooleanField(default=False)
    date_added = models.DateTimeField(auto_now_add=True, blank=True)

    class Meta:
        abstract = True

На моей домашней странице моя последняя попытка выглядела так:

<section id="latest-products">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0"></li>
        </ol>
        {% for product in object_list|slice:":3" %}
        <div class="carousel-inner">
                {% if forloop.first %}
                    <div class="active item">
                {% else %}
                    <div class="item">
                {% endif %}
                <a href="{{ product.get_absolute_url }}">
                        <div class="card margin-resp" id="main-women-toy-product">
                        <img src="{{ product.image.url }}" alt="{{ product.title }}" class="card-img-top">
                            <div class="card-header">
                                <small>{{ product.get_main_category_display }}</small>
                                <h1 class="card-title text-center">
                                    {{ product.title }}
                                </h1>
                            </div>
                            <div class="card-body">
                                <p class="card-text d-none d-sm-block">
                                    {{ product.short_description }}
                                </p>    
                            </div>
                            <div class="card-footer">
                                <small> 
                                    {% if product.discount_price %}
                                    <span class="mr-1">
                                        <del>£{{ product.price }}</del>
                                    </span>
                                    <span>
                                        £{{ product.discount_price }}
                                    </span>
                                    {% else %}
                                    <span>£{{ product.price }}</span>
                                    {% endif %}
                                </small>
                                <div class="quick-add">
                                    <a href="#" class="btn btn-outline-secondary quick-add-button">Add To Cart</a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
        </div>

        <a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control-next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    {% endfor %}
</section>

, который абсолютно ничего не отображает.

Я пробовал несколько различных ползунков, которые, кажется, прекрасно работают в статичной c среде, но полностью запутались в этой динамической c настройке.

Я использую Bootstrap в рамках проекта и использовал CDN, если это важно:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

Поиск ссылок на документы, где люди успешно справлялись с этим в прошлом (хотя я уверен, что я безуспешно обыскивал всю сеть) или кто-то любезно проведет меня по шагам

Заранее спасибо