James Bandenburg
Reputation: 39
HTML/Bootstrap - carousel has stopped working
Had a carousel scrolling through 4 images all set up, and it was all working as it should. Did a bit more work on another part of the site and now the carousel is totally unresponsive - doesn't auto-cycle through the images and the buttons or indicators don't do anything when clicked. I haven't touched any of the code for the carousel since I finished it and made sure it was working, and I've checked as best I can that nothing else is interfering with it!
Console isn't logging any errors or anything.
Can anyone either spot the issue or point me in the right direction?
Code for the carousel:
<div class="container-flex" style="height: fit-content; background-color: #212529;">
<div id="image-carousel" class="carousel slide carousel-dark carousel-fade" data-bs-ride="carousel" style="width: 62%; height: auto; margin: 20px auto">
<div class="carousel-indicators">
<button type="button" data-bs-target="#image-carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#image-carousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#image-carousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#image-carousel" data-bs-slide-to="3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active justify-content-center">
<img src="./resources/office-1209640_1920.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block" >
<h3>Lorem ipsum dolor sit amet</h3>
</div>
</div>
<div class="carousel-item">
<img src="./resources/money-2696219_1920.jpg" class="d-block w-100 h-100" alt="...">
<div class="carousel-caption d-none d-md-block" >
<h3>Quisque eget sem pellentesque</h3>
</div>
</div>
<div class="carousel-item">
<img src="./resources/startup-593341_1920.jpg" class="d-block w-100 h-100" alt="...">
<div class="carousel-caption d-none d-md-block" >
<h3>Tristique turpis semper</h3>
</div>
</div>
<div class="carousel-item">
<img src="./resources/time-3222267_1920.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block" >
<h3>Proin quis ligula rutrum</h3>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#image-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#image-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
Code for the whole page is here - didn't want to copy and paste it all as quite long!
Upvotes: 0
Views: 119
Answers (1)
Rich DeBourke
Reputation: 3423
Your carousel’s not working as you’re using the code for a Bootstrap-5 carousel with Bootstrap-4 JavaScript, and you’re using Bootstrap-5 CSS (while your nav is for Bootstrap-4. Assuming you want to use Bootstrap-4 (that’s the tag you referenced), if you switch everything to Bootstrap-4, the carousel works (I recommend using Bootstrap 4.6.0 as that’s the most recent version).
For demonstration purposes, I modified your code to just use Bootstrap-4:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://kit.fontawesome.com/3f751ee996.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
font-family: 'Nunito', sans-serif;
color: white;
background-color: #212529
}
@media only screen and (max-width: 468px) {
.navbar-brand {
margin-left: 12px !important
}
#contactform {
width: 80%
}
}
.list-group-item {
background-color: #212529;
border: 0px;
}
.list-group-item a {
color: white;
text-decoration: none;
font-size: 24px;
}
.list-group-item a:hover {
color: darkgray
}
.socials-icon {
font-size: 2rem;
color: white !important;
padding: 0 1rem;
}
.socials-icon i:hover {
color: darkgray
}
@media only screen and (max-width: 700px) {
#home {
height: auto !important;
margin-top: 100px
}
#spread {
padding: 24px 6px
}
}
.carousel-caption {
color: #212529;
font-weight: bold;
width: 100%;
background-color: whitesmoke;
opacity: 0.75;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px
}
</style>
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" id="navbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container-flex">
<a class="navbar-brand" href="#" style="align-items: center; margin: 24px">
<img src="resources/robot.jpg" alt="Logo" style="width: 60px; height: 60px; border-radius: 30px">
<span style="font-size: 2rem; padding: 20px">Something Cool</span>
</a>
</div>
<div class="container-flex navbar-collapse collapse" style="margin-right: 24px;" id="navbarCollapse">
<ul class="list-group list-group-horizontal navbar-nav">
<li class="list-group-item nav-item">
<a href="#home">Home</a>
</li>
<li class="list-group-item">
<a href="#about">About</a>
</li>
<li class="list-group-item">
<a href="#gallery">Gallery</a>
</li>
<li class="list-group-item">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="home" class="container-flex d-flex align-items-center justify-content-center" style="background-image: url(./resources/background.jpg); background-size: 100%; background-position: bottom; width: 100%; height: 550px;">
<div class="container-flex" id="spread" style="text-align: center; height: 55%; background-color: #212529; opacity: 0.8; border-radius: 24px; padding: 24px;">
<h1>Something Amazing Is Coming</h1>
<div class="form-group" style="text-align: center; padding: 10px">
<label for="signup-email">Sign up to keep updated!</label>
<input id="signup-email" type="email" class="form-control" placeholder="Enter your email address..." style="width: 60%; margin: 12px auto">
<button class="btn btn-primary" style="margin: 12px">Sign up</button>
</div>
<span>
<a class="socials-icon" href="#"><i class="fab fa-facebook-square"></i></a>
<a class="socials-icon" href="#"><i class="fab fa-instagram-square"></i></a>
<a class="socials-icon" href="#"><i class="fab fa-tiktok"></i></a>
</span>
</div>
</div>
<div class="container-flex" style="height: 60px; background-image: linear-gradient(black, #212529); margin-bottom: 40px">
</div>
<div class="container-flex" id="about" style="height: 60px"></div>
<div class="container">
<div class="row" style="margin-top: 40px;">
<div class="col-xl-6">
<p style="font-size: 22px;">
<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>
<p style="font-size: 20px">In tincidunt libero sit amet sem rutrum maximus. Curabitur cursus metus et eros tincidunt gravida. Quisque et ultricies erat, id ultrices nulla. Maecenas mattis porta purus sit amet efficitur. Integer vehicula magna lectus, at commodo nisi bibendum quis. Morbi vitae quam ex. Donec accumsan sem eu sapien porttitor volutpat. Suspendisse elit ipsum, aliquam sed mattis id, consectetur vitae diam. Suspendisse commodo euismod eros eu pulvinar. Proin elementum purus sed justo sollicitudin, ut ornare tellus varius.
</p>
</div>
<div class="col-xl-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9LtT0xZ11wM?rel=0" allowfullscreen></iframe>
</div>
<!--<iframe width="100%" height="100%" src="https://www.youtube.com/embed/9LtT0xZ11wM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>-->
</div>
</div>
<div class="row" style="margin-top: 40px">
<div class="col-xl-6">
<img src="resources/workplace-2303851_640.jpg" alt="..." class="w-100">
</div>
<div class="col-xl-6">
<p style="font-size: 22px;">
<strong>Maecenas mattis nulla posuere, auctor tortor sit amet, lobortis nibh.</strong>
<p style="font-size: 20px">Sed ut ligula nisl. Pellentesque nunc neque, aliquet in mi nec, ultrices accumsan orci. Nulla facilisi. Curabitur non volutpat metus. Aenean venenatis lacus velit, in iaculis mi tempor non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In molestie commodo mauris, at varius urna mattis eget. Integer consequat orci nulla, vitae interdum orci gravida non.
</p>
</div>
</div>
<div class="row" style="margin-top: 40px">
<div class="col-xl-6">
<p style="font-size: 22px">
<strong>
Aliquam erat volutpat.
</strong>
<p style="font-size: 20px">
Morbi at elementum augue, vitae condimentum risus. Curabitur et pretium lacus, vel condimentum ligula. Suspendisse vulputate iaculis arcu. Proin et est rhoncus, tempus sapien sed, varius ex. Aliquam fringilla, sem et aliquam scelerisque, eros erat ultricies ipsum, suscipit posuere ipsum massa et dolor. Nam euismod ac felis et pharetra. Vivamus fermentum enim turpis, nec viverra risus luctus vitae. Nunc quis tortor ornare, ullamcorper mauris ut, dictum metus. Sed at massa eget neque vestibulum tincidunt. Etiam ac ornare lorem. Aenean a auctor nunc.
</p>
</div>
<div class="col-xl-6">
<img src="resources/network-3537401_640.jpg" alt="..." class="w-100">
</div>
</div>
</div>
<div class="container-flex" id="gallery" style="height: 100px"></div>
<div class="container-flex" style="height: fit-content; background-color: #212529;">
<div id="image-carousel" class="carousel slide carousel-dark carousel-fade" data-ride="carousel" style="width: 62%; height: auto; margin: 20px auto">
<div class="carousel-indicators">
<button type="button" data-target="#image-carousel" data-slide-to="0" class="active"></button>
<button type="button" data-target="#image-carousel" data-slide-to="1"></button>
<button type="button" data-target="#image-carousel" data-slide-to="2"></button>
<button type="button" data-target="#image-carousel" data-slide-to="3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active justify-content-center">
<img src="https://via.placeholder.com/400x240/0000FF.png?text=1" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Lorem ipsum dolor sit amet</h3>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/400x240/FF0000.png?text=2" class="d-block w-100 h-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Quisque eget sem pellentesque</h3>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/400x240/00FF00.png?text=3" class="d-block w-100 h-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Tristique turpis semper</h3>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/400x240/FFFF00.png?text=4" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Proin quis ligula rutrum</h3>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#image-carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-target="#image-carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<div class="container-flex" id="contact" style="height: 100px"></div>
<div class="container-flex align-items-center justify-content-center" style="height: 500px">
<div class="container" style="height: 50%; text-align: center; width: 50%;" id="contactform">
<h2>Get In Touch</h2>
<form class="form-group">
<div class="row justify-content-center">
<div class="col-xs-10">
<label for="contact-name">Name: </label>
<input id="contact-name" class="form-control" type="text">
<label for="contact-email">Email:</label>
<input id="contact-email" class="form-control" type="email">
<label for="contact-message">Message (required): </label>
<textarea id="contact-message" rows="4" required style="resize: none; width: 100%" maxlength="1000"></textarea>
<div class="custom-control custom-checkbox" style="margin-top: 10px;">
<input type="checkbox" class="custom-control-input" id="signup-checkbox">
<label class="custom-control-label" for="signup-checkbox">Add me to the mailing list</label>
</div>
<input type="submit" class="btn btn-primary" style="margin: 12px">
</div>
</div>
</form>
</div>
</div>
<div class="navbar navbar-dark">
<p style="padding-left: 24px;">© James Bandenburg 2021</p>
</div>Upvotes: 1
Related Questions
- Carousel doesn't work in latest Bootstrap's versions
- Bootstrap 4 carousel stopped working when running a js script
- Carousel Not Working using BootStrap4 version 4.5
- Problem with the carousel on Bootstrap v4.5.0
- Bootstrap 4 Carousel Not Displaying
- why carousel not work in bootstrap locally?
- Can't load Carousel - Bootstrap 4
- Bootstrap 4 carousel not working?
- Carousel not working for bootstrap v4
- carousel is not responding on bootstrap