The same carousel in production code isn’t working at https://www.iitiansedu.com/
Guide I’m following: Carousel · Bootstrap v5.3
We’re going to need to see a lot more detail to be able to begin to diagnose this. Please start by posting the template you are using for this page.
Note: When posting code or templates here, enclose the code between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code (or template), then another line of ```. This forces the forum software to keep your code properly formatted.
The template code is
{% extends 'base.html' %}
{% load static %}
{% block title %}IITIANS Edu{% endblock title %}
{% block content %}
<br>
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static 'images/IITIANS Education-brochure 10.jpeg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color:blue;">Students with Mr. Jagtar Singh</h5>
<p style="color:blue;">A group of students with our founder and CEO</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'images/IITIANS Education-brochure 33.jpeg' %}" class="d-block w-100" alt="...">
<h5 style="color:blue;">JEE 2023 Results</h5>
<p style="color:blue;">IITIANS students who got selected at JEE Advanced 2023</p>
</div>
<div class="carousel-item">
<img src="{% static 'images/IITIANS Education-brochure 44.jpeg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color:blue;">NEET 2023 Results</h5>
<p style="color:blue;">IITIANS students who got selected at NEET 2023.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<br>
<br>
{% endblock %}
Good!
What are your STATIC_ROOT and STATIC_URL settings in production? Are you running collectstatic when you deploy? Can you see these files in the directory structure created in STATIC_ROOT?
How are you running your project in production?
What web server are you using?
Are you seeing 404 requests being logged by the server for these images? What are the full urls being requested that result in the 404s?
settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
if DEBUG:
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = 'static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
Are you running collectstatic when you deploy?
yeah, call other images in same folder are loading
Still the same issue.
Complete base template code
<!doctype html>
{% load static %}
{# Load the tag library #}
{% load bootstrap5 %}
{% load django_bootstrap5 %}
{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
{% if 'use_i18n'|bootstrap_setting %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% endif %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="IITIANS">
<meta name="author" content="IITIANS Edu">
<meta name="generator" content="IITIANS">
<body style="background-color: #ffffff">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GDFE97VFLD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GDFE97VFLD');
</script>
<style>
@font-face { font-family: Fact; src: url('/static/fonts/Fact-NarrowBold.ttf'); }
h1 {
font-family: Fact
}
</style>
<title>{% block title %} {% endblock title %}</title>
{% block extra_js %}{% endblock extra_js %}
<link rel="icon" href="{% static 'images/favicon.png' %}" type="image/x-icon">
<link rel="icon" type="image/png" href="{% static 'images/favicon.ico' %}" >
<link rel="icon" href="{% static 'images/favicon.png' %}" >
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'images/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'images/safari-pinned-tab.svg' %}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- IITIANS CSS -->
<link rel="stylesheet" href="{% static 'css/master.css' %}">
<link rel="stylesheet" href="{% static 'fonts/style.css' %}">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<!-- Fontawesome -->
<link type="text/css" href="/static/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" integrity="sha384-tKLJeE1ALTUwtXlaGjJYM3sejfssWdAaWR2s97axw4xkiAdMzQjtOjgcyw0Y50KU" crossorigin="anonymous">
<!-- Bootswatch 4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/cerulean/bootstrap.min.css" integrity="sha384-3fdgwJw17Bi87e1QQ4fsLn4rUFqWw//KU0g8TvV6quvahISRewev6/EocKNuJmEw" crossorigin="anonymous">
<!-- bootstrapcdn 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<!-- bootstrapcdn 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- bootstrapcdn 4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- ReactBootstrap -->
<script>var Alert = ReactBootstrap.Alert;</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/>
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
<script
src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
crossorigin></script>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin></script>
<!-- Core -->
<script src="{% static 'assets/vendor/popper.js/dist/umd/popper.min.js' %}"></script>
<!-- Vendor JS -->
<script src="{% static 'assets/vendor/onscreen/dist/on-screen.umd.min.js' %}"></script>
<!-- Slider -->
<script src="{% static 'assets/vendor/nouislider/distribute/nouislider.min.js' %}"></script>
<!-- Jarallax -->
<script src="{% static 'assets/vendor/jarallax/dist/jarallax.min.js' %}"></script>
<!-- Smooth scroll -->
<script src="{% static 'assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js' %}"></script>
<!-- Count up -->
<script src="{% static 'assets/vendor/countup.js/dist/countUp.umd.js' %}"></script>
<!-- Notyf -->
<script src="{% static 'assets/vendor/notyf/notyf.min.js' %}"></script>
<script type="application/javascript" src="{% static 'assets/js/notify.js' %}"></script>
<!-- Bootlint -->
<script src="https://cdn.jsdelivr.net/npm/bootlint@1.1.0/dist/browser/bootlint.min.js" integrity="sha384-D0zT3yu3RBG+Jc54wtMtxDEyZGWfa30nEkS/o2AyBZUOmIpezYYjBLZjUetRV3iG" crossorigin="anonymous"></script>
<!-- bootstrapcdn 4 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- popperjs CDN -->
<!-- Development version -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- googleapis -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<br>
<a href="{% url 'home' %}"><img src="{% static 'images/iitians-edu-withoutback.png' %}" alt="IITIANS Edu"></a>
<br>
<nav class="navbar navbar-expand-lg mynav">
<div class="container">
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/iitians-edu-withoutback-home.png' %}" alt="IITIANS Edu"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-item nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="{% url 'courses' %}">Courses</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="{% url 'centers' %}">Centers</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="{% url 'students' %}">Students</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="{% url 'careers' %}">Careers</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="{% url 'contact' %}">Contact</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="{% url 'IIPs' %}">IIPs</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<form class="form-inline my-2 my-lg-0" action="#" method="GET">
<input class="form-control mr-sm-2" type="search" name="q" placeholder="Search" value="{{ request.GET.q }}" aria-label="Search">
</form>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="nav-item text-decoration-none" href="{% url 'home' %}" class="text-decoration-none">Ⓡ and © 2001-2024 <span style="font-family: Fact;">IITIANS</span> Edu powered by <span style="font-family: Fact;">IITIANS</span> Group. All Rights Reserved.</a>
<a class="nav-item ms-auto text-decoration-none" href="{% url 'privacy' %}">Privacy</a>
<a class="nav-item ms-auto text-decoration-none" href="{% url 'license' %}">License</a>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
index.html
{% extends 'base.html' %}
{% load static %}
{% block title %}IITIANS Edu{% endblock title %}
{% block content %}
<br>
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static 'images/IITIANS Education-brochure 10.jpeg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color:white;">Students with Mr. Jagtar Singh</h5>
<p style="color:white;">A group of students with our founder and CEO</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'images/IITIANS Education-brochure 33.jpeg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color:blue;">JEE 2023 Results</h5>
<p style="color:blue;">IITIANS students who got selected at JEE Advanced 2023</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'images/IITIANS Education-brochure 44.jpeg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color:blue;">NEET 2023 Results</h5>
<p style="color:blue;">IITIANS students who got selected at NEET 2023.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'images/IITIANS Education-brochure 53.jpeg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color:blue;">Edu Abroad Results</h5>
<p style="color:blue;">IITIANS students who got selected at various International Universities.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'images/IITIANS Education-brochure 57.jpeg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color:blue;">Olympiads Results</h5>
<p style="color:blue;">IITIANS students who got selected at various International Olympiads.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<br>
<br>
{% endblock %}
Nginx with gunicorn everything else is fine but Only this
Is this the issue??
Yes, those error messages in the bottom of your last screen shot are an indication of the cause of your problem. You appear to not be loading jQuery on this page.
I have included the code. Can u let me know the solution
It’s in the docs at Migration Guide - django-bootstrap5 23.4 documentation
You need to include jQuery in your page yourself.
hello mr.ken i have a question for you
is there a way to create static models in django
for exapmle a section like about us only there are one
and i dont want to save that section context static
does not matter if we dont save it at a model but i want to be changeable from admin panel
i really need to that i need this in 4 deffrend project and i hope you can help me
sorry if my question have a writing problem its because im not good in english
tankyou
Welcome @hamiddv !
Your question isn’t related to this topic. Please open a new topic to discuss your question.
1 Like