Js не загружается в html

Вот ошибка, которая продолжает появляться :

2/:47 Uncaught ReferenceError: moveSlide is not defined
    at HTMLAnchorElement.onclick (2/:47:64)
onclick @ 2/:47
2/:48 Uncaught ReferenceError: moveSlide is not defined
    at HTMLAnchorElement.onclick (2/:48:63)

Но я только что закончил свой javascript для карусели управления и кнопок, но кажется, что он не загружается htmlwarningsjs

Я попробовал и проверил весь свой код, но безрезультатно, чтобы найти проблему Я также обнаружил кое-что интересное при просмотре моей страницы источников в инспектореисточники главной страницы, которая показывает мой js скрипт страница проекта, которая не показывает мой js в своих источниках

let slideIndex = 1;
showSlides(slideIndex)

function moveSlide(n) {
    slideIndex += n
    showSlides(slideIndex)
}

function showSlides(n) {
    let slides = document.getElementsByClassName("carousel-item")
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length;
    }

    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"
    }
    slides[slideIndex - 1].style.display = "flex"
}

{% extends 'base.html' %}
{% load static %}

{% block title %}
  Project Page
{% endblock %}
{% block extrahead %}
  <link rel="stylesheet" href="{% static 'css/project.css' %}" />
{% endblock %}

{% block content %}
  <div class="project-card">
    <div class="project-info">
      <h1>{{ project.title }}</h1>
      <p>
        <a href="{{ project.link }}">Project Link</a>
      </p>
      <p>{{ project.description }}</p>
      <a href="{% url 'home' %}">Back to Home</a>
    </div>
    <div class="carousel">
      <div class="carousel-images">
        {% for image in project.images.all %}
          <div class="carousel-item">
            <img src="{{ image.image.url }}" alt="Project image" />
          </div>
        {% endfor %}
      </div>
      <a class="carousel-control prev" onclick="moveSlide(-1)">&#10094;</a>
      <a class="carousel-control next" onclick="moveSlide(1)">&#10095;</a>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
  <script src="{% static 'js/project.js' %}" defer></script>
{% endblock %}

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