Django - Displaying model data based on primary key

I have a model of multiple images and I want to display each of them in their own separate Owl carousel when an image is clicked by using the primary key as a reference. I have everything set up but for some reason my images are not being loaded into the carousel. I have no bad responses so If anyone can help me I'd be grateful.

EDIT here are my models.py:

from django.db import models

# model for displaying images on homepage
class Portrait(models.Model):
    name = models.CharField(max_length= 100)
    painting = models.ImageField(upload_to= 'paintings')
    long_description = models.TextField()
    price = models.IntegerField()
    short_description = models.TextField()
    painting_left = models.ImageField(upload_to= 'carousel_paintings')
    painting_right = models.ImageField(upload_to= 'carousel_paintings')
    painting_top = models.ImageField(upload_to= 'carousel_paintings')
    painting_bottom = models.ImageField(upload_to= 'carousel_paintings')
    painting_back = models.ImageField(upload_to= 'carousel_paintings')

    def __str__(self):
        return self.name



# model for carousel
class Carousel(models.Model):
    painting_front = models.ImageField(upload_to= 'carousel')
    painting_left = models.ImageField(upload_to= 'carousel')
    painting_right = models.ImageField(upload_to= 'carousel')
    painting_top = models.ImageField(upload_to= 'carousel')
    painting_bottom = models.ImageField(upload_to= 'carousel')
    painting_back = models.ImageField(upload_to= 'carousel')

    def __str__(self):

        return self.name

urls.py:

urlpatterns = [
    # homepage
    path('', views.index, name='index'),

    # get the primary key when an image is clicked
    path('<int:pk>', views.index, name='index_with_pk'),

    # use that primary key to fetch that image's data
    path('carousel/', views.carouselData, name="carousel_data")

]

ajax call in index.html when image is clicked:

$.ajax({
   type: "GET",
   url: '{% url "carousel_data"%}',
   data: { "prime_key": prime_key },
   success: function(data) {
      console.clear();
      console.log("Image object primary key: " + prime_key);
      $(".owl-carousel").owlCarousel({
           items:1,
           loop:true,
           nav:true,
           dots: false,
           autoplay: false,
           autoplayTimeout: 5000,
           smartSpeed: 500,
           autoplayHoverPause: false,
           margin: 20,
           touchDrag: true,
           mouseDrag: false,
           navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
      });
   },
   error: function(data){
      console.log('something went wrong');
   }
})

views.py:

def carouselData(request):

    if request.method == "GET":
        # get the primary key from ajax
        my_key = request.GET.get('prime_key')
        carouselObjects = Portrait.objects.filter(pk=my_key).values(
        'painting_left',
        'painting_right',
        'painting_top',
        'painting_bottom',
        'painting_back'
        )[0]

        carouselContext = {
        'carouselObjects': carouselObjects
        }

        # return the data 
        return render(request, "carousel.html", carouselContext)

carousel.html is not fetching these image objects:

{% block carousel_content %}
<!-- left image -->
    <div class="slide slide-4">
        <div class="slide-content">
            <img id="modal-img" src="{{ carouselContext.painting_left.url}}" />
        </div>
    </div>
    <!-- right image -->
    <div class="slide slide5">
        <div class="slide-content">
            <img id="modal-img" src="{{ carouselContext.painting_right.url}}" />
        </div>
    </div>
    <!-- top image -->
    <div class="slide slide5">
        <div class="slide-content">
            <img id="modal-img" src="{{ carouselContext.painting_top.url}}" />
        </div>
    </div>
{% endblock %}