After following the official Bootstrap tutorial, I attempted to set up a carousel containing three images. Despite changing the links for demonstration purposes, the issue persisted. While the navigation arrows seemed functional, the image itself remained static. Even after attempting to address the problem with jQuery, I was unable to get the carousel to rotate through at least three images successfully. My tests were conducted using Google Chrome as my browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.0/lux/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>My Art</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Daniye S. Bartell</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Art</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar End -->
<!-- Start Main Container -->
<div id="main-art" class="container-fluid">
<div class="text-center art-paragraph">
<h1>Glitch Art</h1>
<p>Glitch art has been a passion of mine for about two years now. It never gets old learning new ways to break computer logic and reasoning. It goes without saying that I've broken many a file, but I've never considered those failures. I've thought of them as methods of discovery for new ways to create beautiful new images. I've turned some pictures into sound, taken the hex code and inserted song lyrics, reformatted them in text editors and much, much more. Currently I'm working on a web app that makes it easy for the average person to make their own glitch art! Found below are ...
</div>
<!-- Carousel Code Start -->
<div class="carousel slide" id="glitchCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Carousel Items -->
<div class="carousel-item active">
<img src="https://topbackgroundwallpaper.com/wp-content/uploads/2018/01/space-1080p-wallpaper-space-cataclysm-planet-art-explosion-asteroids-comets-fragments-98315-1920x1080.jpg" alt="First Pic" class="d-block w-100"/>
</div>
<div class="carousel-item">
<img src="https://i.imgur.com/zIRiIpc.jpg" alt="Second Pic" class="d-block w-100"/>
</div>
<div class="carousel-item">
<img src="https://i.imgur.com/OlMlERn.jpg" alt="Third Pic" class="d-block w-100"/>
</div>
<!-- Carousel Item End -->
</div>
<a href="#glitchCarousel" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#glitchCarousel" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Carousel Code End -->
</div>
<!-- End Main Container -->
</body>
</html>
CSS
#selfie
{
border-radius: 20%;
padding: 30px;
}
.info
{
color: #000;
padding-top: 10px;
}
#main-art
{
}
.art-paragraph
{
padding-top: 10px;
color: #000;
margin:auto;
max-width: 50%;
}
#glitchCarousel
{
max-width: 60%;
margin: auto;
border-style: solid;
border-color: #000;
border-width: 12px;
padding: 10px;
}