Display images one by one when user clicks next in Django - python-3.x

Question

I have created a django app where user uploads multiple pdf files and it converts to png and displays the images. I am using ModelForms for this purpose. The upload and the convert part is working fine but how do I display the Images sequentially?
What I want is to display one image and when the user clicks next, the next image should be displayed. Below is my app code:
models.py
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class UserUploadModel(models.Model):
user = models.ForeignKey(User, on_delete = models.CASCADE, null = True)
file = models.FileField(upload_to = 'file_uploads/%d%m%Y')
views.py
from django.shortcuts import render, redirect
from app1.forms import UserUploadForm
from app1.models import UserUploadModel
from app1.convert import convert_file
from app1.transfer import move_dir
import os
from project1 import settings
# Create your views here.
def home(request):
if request.method == 'POST':
form = UserUploadForm(request.POST, request.FILES)
if form.is_valid():
f = form.save()
f.user = request.user
f.save()
ff = request.FILES.getlist('file')
f_list = []
for i in ff:
file_instance = UserUploadModel(file = i)
file_instance.save()
f_list.append(file_instance.file.path)
[convert_file(j) for j in f_list]
src_dir = os.getcwd()
dest_dir = os.path.join(src_dir, 'media/converted_files')
move_dir(src_dir, dest_dir, '*.png')
return redirect('app1-display')
else:
form = UserUploadForm()
return render(request, 'app1/home.html', {'form' : form})
def display(request):
return render(request, 'app1/display.html')
home.html
{%extends "app1/base.html"%}
{%block content%}
<form method="POST" enctype="multipart/form-data">
{%csrf_token%}
{{form.as_p}}
<input type="submit">
</form>
{%endblock content%}

Answer 1

You can display all user's image in your template and then use javascript to hide and show images :
app1/display.html
{% extends "app1/base.html" %}
{% block content %}
{% for image in request.user.useruploadmodel_set.all %}
<image src={{ image.url }} style="width: 100%{% if not forloop.first %}; display: none{% endif %}" />
{% endfor %}
<button id="nextBtn">Next</button
<script>
$(() => {
$("#nextBtn").click(() => {
$('image:visible').hide().next().show()
})
})
</script>
{% endblock %}
I've used jquery because I'm more used to it but that could be done with another framework or vanilla JS.
Why not using a JS carousel library ?