Slides Transition using Javascript and Python

I have a database table with images and I want to display it using slides. The problem I encountered here is that it only shows one image and then just fades away. How can I display the other images too?

views.py

def dashboard(request):
    image = Events.objects.all()
    return render(request, 'dashboard-events.html', {'image': image})

dashboard-events.html

<div class="slider" role="listbox">
    <div class="slider-inner">
        {% for slides in image %}
        <div class="slides {% if forloop.first %} active{% endif %} fade">
            <img src="{{ slides.image.url }}">
            <div class="slide-caption">
                 {{ slides.title }}
            </div>
        </div>
        {% endfor %}
   </div>
   <div class="slider-buttons">
       <button class="prev" type="button" onclick="plusSlides(-1)">
       <button class="next" type="button" onclick="plusSlides(1)">
   </div>
</div>

script

var timer;
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";

  clearTimeout(timer);
  timer = setTimeout(() => plusSlides(1), 2000);
  }

Back to Top