I’m trying to put my gallery slider to be below the title GALLERY. How should I fix the positioning of the container so that it is centred and at the same time responsive?
Also, the fifth image doesn’t seem to be working. Is there something wrong with the javascript total slides? it works with 4 images but I’m trying to do 5 images in total.
let i = 0; // current slide
let j = 5; // total slides
const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");
function next(){
document.getElementById("content" + (i+1)).classList.remove("active");
i = ( j + i + 1) % j;
document.getElementById("content" + (i+1)).classList.add("active");
indicator( i+ 1 );
}
function prev(){
document.getElementById("content" + (i+1)).classList.remove("active");
i = (j + i - 1) % j;
document.getElementById("content" + (i+1)).classList.add("active");
indicator(i+1);
}
function indicator(num){
dots.forEach(function(dot){
dot.style.backgroundColor = "transparent";
});
document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#8052ec";
}
function dot(index){
images.forEach(function(image){
image.classList.remove("active");
});
document.getElementById("content" + index).classList.add("active");
i = index - 1;
indicator(index);
}/* image slider */
.container{
background-color: #ffffff;
width: 45%;
min-width: 520px;
transform: translate(-50%,-50%);
border-radius: 5px;
padding: 20px;
}
.image-container{
position: relative;
width: 100%;
}
.imgg{
position: relative;
width: 100%;
display: none;
}
.active{
display: block;
}
.dot-container{
width: 150px;
margin: 20px auto 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
button{
outline: none;
cursor: pointer;
}
.dot-container button{
height: 13px;
width: 13px;
border-radius: 50%;
border: 3px solid #8052ec;
background-color: transparent;
}
.dot-container button:nth-child(1){
background-color: #8052ec;
}
#prev,#next{
height: 40px;
width: 40px;
position: absolute;
background-color: #8052ec;
color: #ffffff;
margin: auto;
top: 0;
bottom: 0;
border: none;
border-radius: 3px;
font-size: 18px;
font-weight: bolder;
}
#prev{
left: 15px;
}
#next{
right: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>NUS Giving Run BIG 2021</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom Css -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet" />
</head>
<body id="page1">
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="images/org_logo.png" alt="logo" width="50" height="44">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="RaceInfo.html">Race Information</a></li>
<li class="nav-item"><a class="nav-link" href="FAQ.html">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="ContactUs.html">Contact Us</a></li>
</ul>
<span class="navbar-text ">
<a class="btn btn-outline-success me-2 fas fa-sign-in-alt" href="register.html" role="button">
Register</a>
<a class="btn btn-sm btn-outline-secondary far fa-user" href="MyAcct.html" role="button"> Login</a>
</span>
</div>
</div>
</nav>
<!-- Key Visual -->
<div>
<img src="images/KV.jpg" alt="KV" class="KV">
</div>
<!-- About Us -->
<div class="About">
<h1>ABOUT US</h1>
<hr class='hmpg'>
<p class="Home">As a global leader in university philanthropy, NUS Giving is delivering sustainable impact and
realising
possibilities.
</p>
<p class="Home"> We build enduring relationships with our donors to seed and grow transformational opportunities
that
create
a ripple effect of progress through our communities and the world, transforming lives and empowering
change.<br>
We are future-making as we empower students to achieve their fullest potential, give future leaders
and
changemakers the opportunity to learn from the best through world-class academic and research
programmes,
and enable the foremost minds of today to solve the problems of tomorrow through innovative
research.
</p>
<hr>
</div>
<div class="container-fluid feature-section">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6">
<img class="featureimg img-fluid" src="images/runfuture.jpg" alt="runimg">
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<h2>NUS RUN BIG</h2>
<hr class="hmpg">
<p class="Home">NUS GIVING RUN BIG is held annually to celebrate and recognise everyday heroes who
have made a positive impact in the lives of others.<br><br>Come Run BIG with us by taking your pick
from the various challenges and start clocking in those clicks. We have also included the best
running trails in the mix!
</p>
</div>
</div>
</div>
<hr>
<h2>GALLERY</h2>
<div class="container">
<div class="image-container">
<img src="images/G1.jpg" id="content1" class="active imgg">
<img src="images/G2.jpg" id="content2" class="imgg">
<img src="images/G3.jpg" id="content3" class="imgg">
<img src="images/G4.jpg" id="content4" class="imgg">
<img src="images/G5.jpg" id="content4" class="imgg">
</div>
<div class="dot-container">
<button onclick="dot(1)"></button>
<button onclick="dot(2)"></button>
<button onclick="dot(3)"></button>
<button onclick="dot(4)"></button>
<button onclick="dot(5)"></button>
</div>
<button id="prev" onclick="prev()"> < </button>
<button id="next" onclick="next()"> > </button>
</div>
<hr>
<div class="footer-basic">
<footer>
<div class="social">
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram social-icons"></i></a>
<a href="mailto:[email protected]" target="_blank"><i
class="fas fa-envelope social-icons"></i></a>
<a href="https://twitter.com/?lang=en" target="_blank"><i class="fab fa-twitter social-icons"></i></a>
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook social-icons"></i></a>
</div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Terms and Conditions</a></li>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
</ul>
<p class="copyright">NUS Giving Run Big © 2009</p>
</footer>
</div>
<!-- Javascript -->
<script src="script.js"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3904b02e6.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>