Как отобразить слайд-шоу изображений с помощью Bootstrap Carousel в Django?

Я пытаюсь отобразить слайд-шоу с помощью Bootstrap Carousel в Django. Идея заключается в том, чтобы показывать несколько изображений в слайд-шоу для каждой детали события (привязанной к внешнему ключу). Я полагаю, что это может быть связано с обработкой изображений в файле settings.py. Какой код нужно добавить, чтобы это заработало?

Вот изображение того места, где я хотел бы показать слайд-шоу, но оно не работает.

admin.py

from django.contrib import admin
from .models import Person, PersonDetail, Event, EventDetail, EventImage

admin.site.register(Person)
admin.site.register(PersonDetail)
admin.site.register(Event)
admin.site.register(EventDetail)
admin.site.register(EventImage)

models.py

from django.db import models

class Person(models.Model):
    person_text = models.CharField(max_length=200)

    def __str__(self):
        return self.person_text


class PersonDetail(models.Model):
    person = models.ForeignKey(Person, on_delete=models.CASCADE)
    person_subtext = models.TextField()

    def __str__(self):
        return f"{self.person_subtext[:50]}..."


class Event(models.Model):
    event_text = models.CharField(max_length=200)

    def __str__(self):
        return self.event_text


class EventDetail(models.Model):
    event = models.ForeignKey(Event, on_delete=models.CASCADE)
    event_subtext = models.TextField()

    def __str__(self):
        return self.event_subtext
    

class EventImage(models.Model):
    event = models.ForeignKey(Event, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='pics/%y/%m/%d/')
    title = models.CharField(max_length=150)
    sub_title = models.CharField(max_length=100)

    def __str__(self):
        return self.title

views.py

from django.shortcuts import render

from .models import Person, Event, EventImage

def index(request):
    """The home page for History Gallery."""
    return render(request, 'galleries/index.html')


def persons(request):
    """Show all persons."""
    persons = Person.objects.all()
    context = {'persons': persons}
    return render(request, 'galleries/persons.html', context)


def person_detail(request, person_id):
    """Show a single person's details."""
    person = Person.objects.get(id=person_id)

    person_details = person.persondetail_set.all()
    context = {'person': person, 'person_details': person_details}
    return render(request, 'galleries/person_detail.html', context)


def events(request):
    """Show all events."""
    events = Event.objects.all()
    context = {'events': events}
    return render(request, 'galleries/events.html', context)


def event_detail(request, event_id):
    """Show a single event's details."""
    event = Event.objects.get(id=event_id)
    images = EventImage.objects.all()

    event_details = event.eventdetail_set.all()
    context = {'event': event, 'event_details': event_details, 'images': images}
    return render(request, 'galleries/event_detail.html', context)

event_detail.html

{% extends 'galleries/base.html' %}


{% block page_header %}
  <h1>{{ event.event_text }}</h1>
{% endblock page_header %}


{% block content %}


  {% for event_detail in event_details %}
    <div class="card mb-3">
      <!-- Card header with timestamp and edit link -->
      <h4 class="card-header">
        <p>Details</p>
      </h4>
      <!-- Card body with entry text -->
      <div class="card-body">{{ event_detail.event_subtext|linebreaks }}</div>
    </div>
  {% empty %}
    <p>There are no details for this event yet.</p>
  {% endfor %}


  <div id="carouselExampleCaptions" class="carousel slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      {% for image in images %}
      <div class="carousel-item active">
        <img src="{{ image.images.url }}" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{ image.title }}</h5>
          <p>{{ image.sub_title }}</p>
        </div>
      </div>
      {% endfor %}
  </div>


{% endblock content %}

Вернуться на верх