I have an html page with menus and drop down and also an automatic image showsshow which I intend to control using the next and prev command, the code is working fine but the image on the slide keeps disappearing after few seconds.
Here is my code:
let slideIndex = 0;
function showSlide(n) {
const slides = document.getElementsByClassName("mySlides");
if (n >= slides.length) {
slideIndex = 0;
}
if (n < 0) {
slideIndex = slides.length - 1;
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
}
function nextSlide() {
slideIndex++;
showSlide(slideIndex);
}
function previousSlide() {
slideIndex--;
showSlide(slideIndex);
}
// Initialize the first slide
showSlide(slideIndex);* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container1 {
max-width: 1000px;
position: relative;
margin: auto;
margin-top:10%;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning Roots Royal Academy</title>
<!-- Bootstrap 5 CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<!-- Google Fonts -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap'>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<header class="intro">
<h1 style="margin-bottom: 0%;"><b> LEARNING ROOTS ROYAL ACADEMY</b></h1>
<p style="margin-top: -2%;">AFTER AGRIC, KOFARE - YOLA, ADAMAWA STATE </p>
<p style="margin-top: -2%; color: rgb(255, 0, 0); margin-left: 30%;"><i>MOTTO: NURTURING THE FUTURE</i> </p>
<span > <a href="#" style="float: left; margin-left: 80%; margin-top: -3%;" >Student login</a>
<a href="staff_login.html" style="margin-left: 90%; float: left; margin-top: -3%;" >Staff login</a>
<div class="action">
<img src="img/logo.png" alt="SCHOOL LOGO" width="20%"/>
</div>
</header>
<main style="background-color: rgb(109, 0, 252); min-width: 100%;">
<!-- Start Mega Menu HTML -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark navbar-dark shadow">
<div class="container-fluid">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content">
<div class="hamburger-toggle">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbar-content">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" style="font-size: 20px;" aria-current="page" href="index.html">Home</a>
</li>
<li style="margin-left: 10%;" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" style="font-size: 20px; " href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">Admission</a>
<ul class="dropdown-menu shadow">
<li class="dropstart">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Foundation Section</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="earlylevel.html">Foundation Section</a></li>
<li><a class="dropdown-item" href="">Creche</a></li>
<li><a class="dropdown-item" href="">Pre-School 1</a></li>
<li><a class="dropdown-item" href="">Pre-School 2</a></li>
<li><a class="dropdown-item" href="">Reception 1</a></li>
<li><a class="dropdown-item" href="">Reception 2</a></li>
</ul>
</li>
<li class="dropend">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Elementary Section</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">Grade 1</a></li>
<li><a class="dropdown-item" href="">Grade </a></li>
<li><a class="dropdown-item" href="">Pre-School 1</a></li>
<li><a class="dropdown-item" href="">Pre-School 2</a></li>
<li><a class="dropdown-item" href="">Reception 1</a></li>
<li><a class="dropdown-item" href="">Reception 2</a></li>
</ul>
</li>
<li class="dropstart">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Secondary Section</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="">JSS 1</a></li>
<li><a class="dropdown-item" href="">JSS 2</a></li>
<li><a class="dropdown-item" href="">JSS 3</a></li>
<li><a class="dropdown-item" href="">SSS 1</a></li>
<li><a class="dropdown-item" href="">SSS 2</a></li>
</ul>
</li>
<li class="dropend">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Other Programs</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="">Special Computer Classes</a></li>
<li><a class="dropdown-item" href="">Swimming Lesons</a></li>
<li><a class="dropdown-item" href="">Basketball and other Games</a></li>
<li class="dropend">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Enterpreneurship!</a>
<ul class="dropdown-menu dropdown-submenu shadow">
<li><a class="dropdown-item" href="">Cosmetics</a></li>
<li><a class="dropdown-item" href="">Curlinary</a></li>
<li><a class="dropdown-item" href="">Photography</a></li>
<li><a class="dropdown-item" href="">Entertainment</a></li>
<li><a class="dropdown-item" href="">Pasteries</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="">Cooking</a></li>
</ul>
</li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"></a></li>
</ul>
</li>
<li style="margin-left: 10%;" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">Academics</a>
<ul class="dropdown-menu shadow">
<li class="dropstart">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Our Curriculum</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">Sciences</a></li>
<li><a class="dropdown-item" href="">Humanities</a></li>
<li><a class="dropdown-item" href="">Social Sciences</a></li>
<li><a class="dropdown-item" href="">Arts</a></li>
<li><a class="dropdown-item" href="">Library</a></li>
<li><a class="dropdown-item" href="">Academic Calender</a></li>
</ul>
</li>
<a href="#" class="dropdown-item" href="">Library</a></a></li>
<a href="#" class="dropdown-item" href="">facilities</a></a></li>
<a href="#" class="dropdown-item" href="">Math Resource Centre</a></a></li>
<a href="#" class="dropdown-item" href="">Writing Centre</a></a></li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<li style="margin-left: 10%;" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">News and Events</a>
<ul class="dropdown-menu shadow">
<a href="#" class="dropdown-item" href="">LRRAThisWeek</a></a></li>
<a href="#" class="dropdown-item" href="">Press Release</a></a></li>
<a href="#" class="dropdown-item" href="">Events Calendar</a></a></li>
<li class="dropend">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">LRRA Events</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">Summer 2023</a></li>
<li><a class="dropdown-item" href="">Graduation Ceremony 2023</a></li>
<li><a class="dropdown-item" href="">Science Fair 2023</a></li>
<li><a class="dropdown-item" href="">Cultural Day 2023</a></li>
<li><a class="dropdown-item" href="">Fruits Day 2023</a></li>
<li><a class="dropdown-item" href="">Kindness Day 2023</a></li>
</ul>
</li>
<li class="dropstart">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Photo Gallery</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="summer.html">Summer 2023</a></li>
<li><a class="dropdown-item" href="gallery.html">Graduation Ceremony 2023</a></li>
<li><a class="dropdown-item" href="">Science Fair 2023</a></li>
<li><a class="dropdown-item" href="">Cultural Day 2023</a></li>
<li><a class="dropdown-item" href="">Fruits Day 2023</a></li>
<li><a class="dropdown-item" href="">Kindness Day 2023</a></li>
</ul>
</li>
<li class="dropend">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Speeches</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="">MD's Speech, Graduation Ceremony 2023</a></li>
<li><a class="dropdown-item" href="">Administrator's Speech, Graduation Ceremony 2023</a></li>
<li><a class="dropdown-item" href="">Chairman's Speech, Graduation Ceremony 2023</a></li>
<li><a class="dropdown-item" href="">Valedictorian's Speech, Graduation Ceremony 2023</a></li>
</ul>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<li style="margin-left: 10%;" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">About</a>
<ul class="dropdown-menu shadow">
<li class="dropstart">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Overview</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">History</a></li>
<li><a class="dropdown-item" href="gallery.html">Mission and Vission</a></li>
<li><a class="dropdown-item" href="">Why Study at LRRA</a></li>
</ul>
</li>
<li class="dropend">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Leadership</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">Board of Trustees</a></li>
<li><a class="dropdown-item" href="gallery.html">Governing Council</a></li>
<li><a class="dropdown-item" href="">Office of the Administrator</a></li>
<li><a class="dropdown-item" href="">Administration</a></li>
</ul>
</li>
<a href="#" class="dropdown-item" href="">Careers</a></a></li>
<a href="#" class="dropdown-item" href="">Contacts</a></a></li>
<li class="dropstart">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Institute</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">IT Institute</a></li>
<li><a class="dropdown-item" href="gallery.html">AID</a></li>
</ul>
</li>
</li>
</ul>
<li style="margin-left: 10%;" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">Campus Life</a>
<ul class="dropdown-menu shadow">
<a href="#" class="dropdown-item" href="">Campus Life</a></a></li>
<li class="dropend">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Student Affairs</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">Sports</a></li>
<li><a class="dropdown-item" href="">Creativity</a></li>
</ul>
</li>
<li class="dropstart">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Health center</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="gallery.html">Health Tips</a></li>
<li><a class="dropdown-item" href="">First Aid Tips</a></li>
<li><a class="dropdown-item" href="">Health Centre News</a></li>
</ul>
</li>
</ul>
</div>
</div>
<form class="d-flex ms-auto">
<div class="input-group">
<input class="form-control border-0 mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary border-0" type="submit">Search</button>
</div>
</form>
</nav>
<!-- END Mega Menu HTML -->
<section>
<!-- Slideshow container -->
<div class="slideshow-container1">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 8</div>
<img src="img/BG 04.jpg" style="width:100%; ">
<div style="position: absolute; top: 50%; left: 10%; color: rgb(255, 255, 255);"><H1 style="font-family: Arial, Helvetica, sans-serif; font-weight: bolder; font-size: 45px;">ADMISSION IS ONGOING</H1>
<li><a class="dropdown-item" style="font-size: x-large; text-align: center; background-color: rgb(255, 248, 248); color: black; margin-left: -1.3%; " href="lrraeducators.html">WATCH VIDEO</a></li></li>
</div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 8</div>
<img src="img/BG 02.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 8</div>
<img src="img/BG 05.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 8</div>
<img src="img/4.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 8</div>
<img src="img/5.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 8</div>
<img src="img/6.jpg" style="width:100%; height:20%;">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 8</div>
<img src="img/7.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 8</div>
<img src="img/8.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<!-- <a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a> -->
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
<!-- Add more dots for each slide -->
</div>
<!-- Next and previous buttons -->
<!-- Next and previous buttons -->
<a class="prev" onclick="previousSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</section>
</main>
<li><a class="dropdown-item" style="font-size: x-large; text-align: center; background-color: orangered; color: white;" href="img/20221122_181012.mp4">WATCH OUR MAIDEN GRADUATION CEREMONY</a></li> </div>
<div style=" text-align: center; min-width:100%;" > <ul >
<li><a class="dropdown-item" style="font-size: x-large; text-align: center; background-color: brown; color: black; margin-left: -1.3%; " href="lrraeducators.html">MEET THE EDUCATORS</a></li></li>
<footer class="credit">Author: F. M. Kwende - Distributed By: <a title="Awesome web design code & scripts" href="#" target="_blank">MAFIDO</a></footer>
<!-- Bootstrap 5 JS -->
<script defer src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
<script defer>
document.addEventListener('click',function(e){
// Hamburger menu
if(e.target.classList.contains('hamburger-toggle')){
e.target.children[0].classList.toggle('active');
}
})
</script>
</body>
</html>That’s the entire page code. I don’t know if it’s the positioning or it is been affected by a CSS code or any other JavaScript code that is triggering it to disappear. Thanks for your support.
2
Answers
remove space from all BG 01.jpg, BG 02.jpg, BG 03.jpg, BG 04.jpg, BG 05.jpg images. beacase html unable to find images with space on it
In the Bootstrap CSS there’s: