Carousel card not working with the javascript - javascript

Carousel not working please provide me guidelines to make it run.
also, if possible make it infinite load on horizontal scroll.
I tried but JavaScript is not working. Kindly provide me actual guidance to make it run.
https://codepen.io/TA0011/pen/qBxqmYr
Code
let currentScrollPosition = 0;
let scrollAmount = 320;
const sCont = document.querySelector(".storys-conatainer");
const hScroll = document.querySel ector(".horizontal-scroll");
let maxScroll = -sCont.offsetWidth + hScroll.offsetWidth;
function scrollHorizontally(val) {
currentScrollPosition += (val * scrollAmount);
sCont.style.left = currentScrollPosition + "px";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
<div class="container">
<div class="horizontal-scroll">
<button class="btn-scroll" id="btn-scroll-left" onclick="scrollHorizontally(1)"><i class="fas fa-chevron-left"></i></button>
<button class="btn-scroll" id="btn-scroll-right" onclick="scrollHorizontally(-1)"><i class="fas fa-chevron-right"></i></button>
<div class="storys-container">
<div class="story-circle">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaibWeB6YHcbSZ05T8GEaAaxROO_JCdcYpjgU-rH_yS9IEduhj11ExA_yWVPKrTnqxJzg&usqp=CAU" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
</div>
</div>
</div>
</body>
</html>


Why don't you use Bootstrap CSS library. It's pretty easy and simple and I guess you'll manage to get hold of it quickly. Everything is available in a pre-written form and you just need to make some minor changes like your images' src and that's all. Here is how it works.
To start with, you need to include Bootstrap’s production-ready CSS and JavaScript via CDN. Place the tag in the for Bootstrap CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
, and the tag for JavaScript bundle before the closing :
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
Of course, there are other ways to get started with Bootstrap. I assume the above the easiest, but if you're interested, you can read more about it on their webpage:
Get started with Bootstrap
Anyway, next you just need to create a container for your carousel in your . You can do this by using bootstrap containers and columns. Here is a simple code:
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
</div>
</div>
</div>
Again, if you're interested to know more about containers and columns, you can read these pages:
Bootstrap Containers
Bootstrap Columns
Finally, in order to make your carousel as quickly as possible, just copy and paste this pre-written code for carousel inside the above:
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image01.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image02.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image03.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
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="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Of course you need to write down the correct src for your own images in the code snippet above. Again, if you'd like to know more about Bootstrap carousels and how to customize them, you can check their own webpage:
Bootstrap Carousel
Hope you find this useful. :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image01.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image02.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image03.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
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="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
</body>
</html>

Related

Hide and Display text on a click function (HTML, CSS, JS)

I'm currently developing a website with bootstrap and I'm trying to build a function to show and hide a text whenever I click on a thumbnail, without the need to load another page.
It would be ideal to have some kind of a "radio type input" to toggle between the contents shown through clicks on the thumbnails.
Beneath the sidebar are the thumbnails and on the right is the main content.
I'd like the page to have the text as a "placeholder" and whenever i click on a thumbnail with a image, the image should appear replacing the text shown as the main content.
At the moment if i click on a thumbnail it looks like this.
I'll keep on trying by myself but i'd be really grateful if you guys could help me out.
Stay safe and healthy!
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek - The Twin Tower of Arts</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../../assets/css/style.css">
<link href="../../assets/css/i20.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../assets/js/ubertooltip.js"></script>
</head>
<body onLoad="loadTip()">
<!-- START Mobile Nav-->
<header>
<nav class="d-xl-none headerMenu navbar fixed-top" onclick="openNav()">
☰
<h5 id="headerLogo">Christoph Urwalek</h5>
</nav>
</header>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
<br>
<br>
current
text
biography
contact
</div>
</div>
<!-- END Mobile Nav-->
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><b>Christoph Urwalek</b></li>
<br>
<li>painting</li>
<li>drawing</li>
<li><a class="active" href="../collagework/collage.html">collage</a></li>
<li>video</li>
<li>
<a> </a>
</li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
<br>
<div class="thumbnailContainer">
<img href="/collagework/the_twin_towers_of_arts_in_education.html" src="../assets/img/The Twin Towers of Arts in Education/TextLogo.png" alt="" class="img-thumbnail border-0 img-thumbnail-desktop">
<img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-01__.jpg" alt="" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-02__.jpg" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-03__.jpg" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
</div>
<!--END Thumbnaill Navbar-->
<div>
</nav>
</div>
<!--END Sidebar -->
<!--START Wandcollage-->
<div class="col-md-9 ">
<!--main content-->
<p class="text-justify textMargin ">
<b>The Twin Towers of Arts in Education</b><br><br> Siebdruck auf Papier, 95 x 65 cm, 2013<br><br> Die Displays veranschaulichen in Diagrammstruktur Perspektiven künstlerischer Handlungsformen in Bildungsprozessen unterschiedlicher Partikularkulturen.
Jede Ebene der beiden Türme repräsentiert einen Konzeptrahmen, der Diskursformen mittels vier Axiomen zeigt: Reproduktion, Affirmation, Dekonstruktion und Transformation. Der linke Turm repräsentiert Wissensproduktion in künstlerischen Prozessen,
während der rechte Turm Wissensproduktion in analogen Bildungsprozessen repräsentiert. Die Konzeptrahmen in den Türmen bewegen sich zwischen kontextellen Strukturen und gesellschaftlichen Strukturen. Alle Eckpunkte der jeweiligen Axiome sind
entsprechend miteinander verbunden und stehen sich im Kommunikationsprozess kritisch gegenüber. Zwischen den beiden Türmen befindet sich die Achse der Kritikalität. Sie ist vermittelnd verbunden mit den einzelnen Diskursformen. Auf ihr entsteht
die Perspektive eines Gegenbewusstseins, das die Achse des vorherrschenden Bewusstseins in einem transformativen Lernprozess durchkreuzt. Die Arbeit orientiert sich an Stephen Willats Konzeption eines Parameter Modells, das zwischen unterschiedlichen
existierenden und möglichen ideologischen Konzeptrahmen vermittelt.
</p>
<div class="container expandedImgSize d-flex justify-content-center ">
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="">
<div id="imgtext">
<!--TEXT EINFÜGEN-->
</div>
</div>
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Montage-01_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection_.jpg" alt="" style="width:400px;">
<div class="caption">
<p style="margin-top: 5px;" id="captionStyle">
Collection, Performance, © Christian Helbock<br> 2013
</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-10_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-13_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller<br>2013
</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-15_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller
<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-16_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller
<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Montage-02_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Zusammenarbeit (Together), Montage: © Christian Helbock<br> 2013</p>
</div>
</a>
</div>
</div>
<!--section-->
</div>
<!-- d-xl-none -->
<!--section-->
</div>
<!--col-md-9-->
</div>
</div>
<!--END Wrapper-->
<script src="../assets/js/main.js">
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>

Wrote a brief example on how to incorporate a basic image selector.
function myFunction(img) {
let currImage = img.target;
let image = document.querySelector("#expandedImg");
let textImage = document.querySelector("#imgtext");
textImage.innerText = currImage.alt;
image.setAttribute('src', currImage.src);
}
let images = document.querySelectorAll(".thumbnailContainer > img");
images.forEach((img) => {
img.addEventListener("mouseover", myFunction, true);
});
.thumbnailContainer > img {
cursor: pointer;
}
<html lang="en">
<head>
<title>Basic Image Selector</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="thumbnailContainer">
<img src="https://i.picsum.photos/id/344/200/300.jpg?hmac=hFZM-uJoRMyNATe_kjGvS2NGGP60jqqP64vpGQ98VAo" alt="This is Image 1" id="img-thumbnail border-0 img-thumbnail-desktop" />
<img src="https://i.picsum.photos/id/509/200/300.jpg?hmac=Y2Mtq5PEipyaFNlDH01CoNhW9to1T8GCuTf6yUSH-TY" alt="This is Image 2" id="img-thumbnail border-0 img-thumbnail-desktop" />
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="This is Image 3" id="img-thumbnail border-0 img-thumbnail-desktop" />
<img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="This is Image 4" id="img-thumbnail border-0 img-thumbnail-desktop" />
</div>
<img id="expandedImg" />
<div id="imgtext"></div>
</body>
</html>

Bootstrap 5 Button collapse and carousel

I want to implement two buttons with Bootstrap 5. One button activates two JavaScript functions that open a bootstrap carousel. The other button is a simple collapse button that should open a long text string.
The collapse button does not work. I assume that it has something to do with the way I have implemented Bootrap 5. However, I cannot figure out a solution.
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display === 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function blur_function(id) {
var g = document.getElementById(id);
if(g.style.filter === "blur(5px)")
g.style.filter = "none";
else
g.style.filter = "blur(5px)";
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<button id="button_search_decision" type="button" class="btn btn-primary" onclick="blur_function('tax'); toggle_visibility('carouselExampleControls')">Belege einsehen</button>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="Bild 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild 3">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild 4">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" 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-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet.
</div>
</div>

As of mid-2022, despite the claims from otree's documentation, it does not work properly with Bootstrap.
There are way too many missing indications in the documentation which makes bootstrap virtually unusable.
My advice is to focus on manually coding the bootstrap elements whenever possible. Accordions are easy, you can check one example here that does not use javascript.
Unfortunately I cannot comment on the carousel.
This is probably not the answer you were looking for, but unfortunately otree5 is nowhere near to have a working bootstrap implementation.

Bootstrap brand image overlapping container below the nav bar

I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute

Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Implementation of Carousel of bootstrap 4 is not working

I have written the following code for carousel using Bootstrap 4. I have appended the code. However, I am unable to bring the other slides into picture only the first slide comes into picture even with the controls. I wish to know what is wrong with the code.
carousel.js
<html>
<head>
<title> Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Carousel</title>
<style>
</style>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Desert.jpg" alt="Desert" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Hydrangeas.jpg" alt="Hydrangeas" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Jellyfish.jpg" alt="Jellyfish" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

You don't add the Bootstrap JavaScript plugins, so the code for the slide behaviors of the carousel isn't available. You have to add the following <script> to the <head> at least:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Your working example:
<html>
<head>
<title> Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<!-- Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placehold.it/100x101" alt="Desert" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/100x102" alt="Hydrangeas" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/100x103" alt="Jellyfish" style="width:100%;">
</div>
</div>
<!-- left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Bootstrap carousel went chaos

I have a problem with basic bootstrap carousel. I just want slides to move every four seconds, for example. Carousel looks like this:
$(document).ready(function() {
fixCarousel();
});
function fixCarousel() {
$('.carousel').carousel({
interval: 1000*4
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>
But strange things are happening. It works one time, another it waits like 10 sec, then few seconds, then, it goes normally, then, it stops cycling at all...
Any solutions? Thanks.

Here you go with the solution https://jsfiddle.net/zj6bj6cj/
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000*4
});
});
img {
height: 300px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>

Categories