I am working with the latest edition of MDB Pro and can't get a simple carousel example to work. I want to have a 3-image slider that is responsive and full-width to the screen, and I copied and pasted sample code that (theoretically) should work, but it doesn't. It displays the first image, but not the other three. Here's the code:
<!DOCTYPE html>
<html>
<head runat="server">
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<title>MyMooseBox.com - <%=Page.Title %></title>
<link rel="stylesheet" href="content/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<link rel="stylesheet" href="content/bootstrap.min.css" />
<link rel="stylesheet" href="css/mdb.min.css" />
<link rel="stylesheet" href="plugins/css/all.min.css" />
<script src="scripts/jquery-3.7.0.min.js"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="plugins/js/all.min.js"></script>
<script src="scripts/jquery-ui-1.13.2.min.js"></script>
<script src="scripts/umd/popper.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<img src="img/ps_nameonly.png" height="40" alt="MDB Logo" loading="lazy" />
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Team</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
</ul>
</div>
<div class="d-flex align-items-center">
<a class="link-secondary me-3" href="#"><i class="fas fa-shopping-cart"></i></a>
<div class="dropdown">
<a class="link-secondary me-3 dropdown-toggle hidden-arrow" href="#"
id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-bell"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Some news</a></li>
<li><a class="dropdown-item" href="#">Another news</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuAvatar" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
lass="rounded-circle" height="25" alt="Black and White Portrait of a Man" loading="lazy" />
</a>
<ul class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuAvatar">
<li><a class="dropdown-item" href="#">My profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="cpMain" runat="server"></asp:ContentPlaceHolder>
</form>
</body>
</html>
Can anyone tell me what I'm missing or doing wrong? Thanks for the help!