I'm currently adding a Bootstrap carousel gallery into my page.
The photos change automatically after a few seconds, although if i try to change them manually, the buttons don't work. I've added Jquery, PopperJs and Bootstrap, although i still can't make it to work properly.
Here is a sample of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>...</title>
<meta name="description" content="..." />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet"/>
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top"><img src="assets/img/logos/logo.png" alt="..."/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item2"><a class="nav-link" href="/en/index.html" style="box-shadow: 0 1px #ffff;">EN</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-subheading">...</div>
<div class="masthead-heading">...</div>
<a class="btn btn-primary btn-xl text-uppercase" href="#about">More Info</a>
</div>
</header>
<!-- About-->
<section class="page-section" id="about">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">About Us</h2>
<h3 class="section-subheading text-muted my-5"><p>...</h3> </div>
</section>
<!--Gallery-->
<section class="page-section" id="gallery">
<div class="container">
<h2 class="section-heading text-uppercase text-center">Gallery</h2>
<div class="carousel slide carousel-fade my-5" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/img/gallery/1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/img/gallery/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/img/gallery/3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#gallery" 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="#gallery" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Our Services</h2>
</div>
<div class="row text-center my-5">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<img class="logo" src="...">
</span>
<h4 class="my-3">...</h4>
<p class="text-muted">...</p>
</div>
</div>
</div>
</section>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-white">...</h3>
<div class="row text-center">
<div class="col-md-4 column">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
</span>
<p class="contacts-text text-white">...</p>
</div>
<div class="col-md-4 column">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-phone fa-stack-1x fa-inverse"></i>
</span>
<p class="contacts-text text-white">...</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x text-primary "></i>
<i class="fas fa-location-dot fa-stack-1x fa-inverse"></i>
</span>
<p class="contacts-text text-white">...</p>
<p class="contacts-text text-white">...</p>
<div class="google-map"><iframe src="..." width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>
</div>
<p><h3 class="section-subheading text-white">...</h3></p>
</div>
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
<div class="form-group">
<!-- Name input-->
<input class="form-control" id="name" type="text" placeholder="Your Name *" data-sb-validations="required" />
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<div class="form-group">
<!-- Email address input-->
<input class="form-control" id="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<div class="form-group mb-md-0">
<!-- Phone number input-->
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0">
<!-- Message input-->
<textarea class="form-control" id="message" placeholder="Your Message *" data-sb-validations="required"></textarea>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
</div>
</div>
<!-- Submit success message-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center text-white mb-3">
<div class="fw-bolder">Form submission successful!</div>
</div>
</div>
<!-- Submit error message-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<div class="text-center"><button class="btn btn-primary btn-xl text-uppercase disabled" id="submitButton" type="submit">Send Message</button></div>
</form>
</div>
</section>
<!-- Footer-->
<footer class="footer py-2">
<div class="container">
<div class="row align-items-center text-center">
<div class="col-lg-7 text-lg-start">All Rights Reserved © 2023</div>
<div class="col-lg-5 text-lg-end my-3">
<a class="link-dark text-decoration-none me-3" href="./attribution.html">Attribution</a>
<a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a>
<a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>
<!-- Jquery-->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Popper-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
How can i get the buttons to work? Any help would be appreciated.
I have figured it out. Just remove the id="gallery" from the <section> and put it into the div which is immediately after <h2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<!--Gallery-->
<section class="page-section">
<div class="container">
<h2 class="section-heading text-uppercase text-center">Gallery</h2>
<div id="gallery" class="carousel slide carousel-fade my-5" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1000/1000?random=1" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1000/1000?random=2" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1000/1000?random=3" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#gallery" 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="#gallery" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- Jquery-->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Popper-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>