When attempting to integrate a slider into an HTML page within my Django project, I am encountering issues with the CSS and JavaScript not loading properly. As a result, instead of having a functional slider where images slide across the screen, I am seeing only a vertical line of pictures. The browser console is showing the following errors:
Failed to load resource: the server responded with a status of 404 (Not Found)
slider.js:1 Uncaught ReferenceError: $ is not defined
at slider.js:1
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
countdown.js:26 Uncaught TypeError: Cannot set property 'innerHTML' of null
at updateClock (countdown.js:26)
at initializeClock (countdown.js:36)
at countdown.js:41
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
slider.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Below is the structure of my static folder:
static
-->second
---->css
>app
slider.css
---->js
>app
slider.css
Here is the code snippet from my HTML file:
{% load static %}
<link rel="stylesheet" href="{% static 'second/css/app/slider.css' %}">
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="{% static 'second/js/app/slider.js' %}"></script>
<div class="container">
<h3>Our Partners</h3>
<section class="customer-logos slider">
[Images go here]
</section>
</div>
This is a snippet from my JavaScript file (slider.js):
$(document).ready(function(){
$('.customer-logos').slick({
[Slider settings go here]
});
});
And here is the CSS stylesheet (slider.css) for the slider:
[CSS styles go here]
If you would like to see a working example of this slider, please visit this CodePen link.