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>
