Переход слайдов с помощью Javascript и Python

У меня есть таблица базы данных с изображениями, и я хочу отобразить ее с помощью слайдов. Проблема, с которой я столкнулся, заключается в том, что отображается только одно изображение, а затем оно просто исчезает. Как я могу отобразить и другие изображения?

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);
  }

Вернуться на верх