I am trying to display a slideshow using Bootstrap Carousel in Django. The idea is to show multiple images in the slideshow for each event detail (attached with a foreign key). I believe it might have something to do with image handling in the settings.py file. What code should I add for this to work?

This is an image of where I would like the slideshow to show, but it is not working.

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="..." 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 %}