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.
In the Bootstrap CSS there's:
.fade:not(.show) {
opacity: 0;
}