'Django Template Multi Image Carousel

I'm trying to create a Carousel that shows multiple pictures of a single cat for a cattery project I'm doing. I'm trying to figure out the right template to make this work.

My Models

  class Cat(models.Model):
    name = models.CharField(max_length=32, null=True)
    available = models.BooleanField()
    main_image = models.ImageField(upload_to="images/")
    age = models.CharField(max_length=64, null=True)
    mix = models.CharField(max_length=128, null=True)
    dob = models.CharField(max_length=16)
    sex = models.CharField(max_length=16)
    description = models.TextField(max_length=256, null=True)

    def __str__(self):
        return f"{self.name} : {self.sex} {self.age} || Available : {self.available}"


class Images(models.Model):
    name = models.CharField(max_length=64, null=True)
    image = models.ForeignKey(Cat, related_name='images', on_delete=models.CASCADE)

    def __str__(self):
        return self.name

My View

 def available(request):
    context = {}
    return render(request, "cattery/available.html", {'available_kittens': Cat.objects.exclude(available=False).all()})

My HTML

   {% for kitten in available_kittens %}

        <div class="flexbox-item">

            <img class="thumbnail" src="{{ kitten.images.url }}">
            <h2> {{ kitten.name }} </h2>
            <hr>
            <h4> {{ kitten.sex }} </h4>
            <h6> {{ kitten.dob }} </h6>
            <p> {{ kitten.description}} </p>
        </div>

  {% endfor %}

My Assumption

<div id="carousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        {% for image in kitten.images.all() %}
        <div class="carousel-item active">
          <img class="d-block w-100" src="{{ image }}" alt="First slide">
        </div>
        {% endfor %}
        <div class="carousel-item">
          <img class="d-block w-100" src="..." alt="Second slide">
        </div>

How can I call the images related to each kitten with a django Template?

I know I could just include multiple image fields, but I've seen people suggest this method of creating a secondary class.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source