title: Bootstrap 4 carousel next and prev slides don't work
body: <p>I'm trying to solve an weird issue for a school group project on my own, but I'm at wit's end. Essentially, I have a Bootstrap 4 Carousel with three images. Though one of the images is displayed, you can't advance to the next or previous slides. The initial webpage is launched using php as follows:</p>
  
  <pre><code>&lt;?php
  
  //require_once('connection.php');
  
  if (isset($_GET['controller']) &amp;&amp; isset($_GET['action'])) {
      $controller = $_GET['controller'];
      $action     = $_GET['action'];
  } else {
      $controller = 'static';
      $action     = 'landing';
  }
  
  require_once('views/layout.php');
  ?&gt;
  </code></pre>
  
  <p>The landing page launches <code>layout.php</code> (which has the Bootstrap, jQuery, popper and other JavaScript files and <code>landing.php</code> (which has the carousel code:</p>
  
  <h3>landing.php:</h3>
  
  <pre><code>&lt;div id="main_container" class="container-fluid"&gt;
      &lt;div id="body" class="container"&gt;
          &lt;p&gt;Stuff about how great the application is.&lt;/p&gt;
          &lt;div id="carousel" class="carousel slide" content="width=device-width data-ride="carousel"&gt;
  
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#carousel" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;li data-target="#carousel" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;/ol&gt;
  
              &lt;!-- The slideshow --&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="carousel-item active"&gt;
                      &lt;img src="./views/images/kids_kites.png" alt="Los Angeles"&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;h3&gt;Los Angeles&lt;/h3&gt;
                          &lt;p&gt;We had such a great time in LA!&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item"&gt;
                      &lt;img src="./views/images/kids_playing.png" alt="Chicago"&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;h3&gt;Chicago&lt;/h3&gt;
                          &lt;p&gt;We had such great pizza in CHI!&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item"&gt;
                      &lt;img src="./views/images/kids_swing.png" alt="New York"&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;h3&gt;New York&lt;/h3&gt;
                          &lt;p&gt;It is too crowded!&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Left and right controls --&gt;
              &lt;a class="carousel-control-prev" href="#carousel" data-slide="prev"&gt;
                  &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="carousel-control-next" href="#carousel" data-slide="next"&gt;
                  &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
              &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a href="?controller=static&amp;action=searchEvents" id="searchEvents"&gt;Search Events&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>layout.php</h3>
  
  <pre><code>&lt;!doctype HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
      &lt;script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
              integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
              crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
            integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"&gt;
      &lt;title&gt;Kamps For Kids&lt;/title&gt;
      &lt;link rel="stylesheet" href="views/styles/styles.css"&gt;
      &lt;script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script defer src="views/scripts/main.js"&gt;&lt;/script&gt;
      &lt;script defer src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
  require_once "templates/header.php";
  require_once "templates/footer.php";
  require_once "routes.php";
  ?&gt;
  &lt;div id="id01" class="modal"&gt;
      &lt;!--action_page.php is the php file which will perform user validation when the 'submit' button is clicked --&gt;
      &lt;form class="modal-content animate" action="/action_page.php"&gt;
          &lt;div class="img-container"&gt;
              &lt;span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal"&gt;&amp;times;&lt;/span&gt;
              &lt;div&gt;&lt;img src="./views/images/KamparoosLogo.png" alt="Logo" class="logo"&gt;&lt;/div&gt;
              &lt;img src="./views/images/img_avatar2.png" alt="Avatar" class="avatar"&gt;
  
              &lt;div&gt;
                  &lt;!-- Add icon library from font-awesome --&gt;
                  &lt;link rel="stylesheet"
                        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
                  &lt;!-- Add font awesome icons --&gt;
                  &lt;a href="#" class="fa fa-facebook"&gt;&lt;/a&gt;
                  &lt;a href="#" class="fa fa-twitter"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="container"&gt;
              &lt;label for="uname"&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/label&gt;
              &lt;input type="text" placeholder="Enter Username" name="user-name" required&gt;
  
              &lt;label for="psw"&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
              &lt;input type="password" placeholder="Enter Password" name="psw" required&gt;
  
              &lt;button type="submit"&gt;Login&lt;/button&gt;
              &lt;label&gt;
                  &lt;input type="checkbox" checked="checked" name="remember"&gt; Remember me
              &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="container" style="background-color:#FAFC2F"&gt;
              &lt;button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancel-btn"&gt;
                  Cancel
              &lt;/button&gt;
              &lt;span class="psw"&gt;Forgot &lt;a href="#"&gt;password?&lt;/a&gt;&lt;/span&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="id02" class="modal"&gt;
      &lt;!--action_page.php is the php file which will perform user validation when the 'submit' button is clicked --&gt;
      &lt;form class="modal-content animate" name="registrationForm" onsubmit="return validateForm()" method="post"
            action="/action_page.php"&gt;
          &lt;div class="img-container"&gt;
              &lt;h3&gt;Registration Form&lt;/h3&gt;
              &lt;span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal"&gt;&amp;times;&lt;/span&gt;
              &lt;div&gt;&lt;img src="./views/images/KamparoosLogo.png" alt="Logo" class="logo"&gt;&lt;/div&gt;
              &lt;img src="./views/images/img_avatar2.png" alt="Avatar" class="avatar"&gt;
              &lt;div&gt;
                  &lt;!-- Add icon library from font-awesome --&gt;
                  &lt;link rel="stylesheet"
                        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
          &lt;div class="form-row"&gt;
              &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="firstName"&gt;First Name&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="firstName" placeholder="Enter first name" name="firstName"
                         required&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="lastName"&gt;Last Name&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="lastName" placeholder="Enter last name" name="lastName"
                         required&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="emailAddress"&gt;Email Address&lt;/label&gt;
                  &lt;input type="email" class="form-control" id="emailAddress" placeholder="Enter email address"
                         name="emailAddress" required&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="phoneNumber"&gt;Phone Number&lt;/label&gt;
                  &lt;input type="tel" class="form-control" id="phoneNumber" placeholder="Enter 10 digit phone number"
                         name="phoneNumber" required
                         pattern="[0-9]{3}[0-9]{3}[0-9]{4}"
                         size="10"&gt;
              &lt;/div&gt;
  
  
              &lt;div class="form-group col-md-12"&gt;
                  &lt;label for="numOfKids"&gt;Number of Kids &lt;/label&gt;
                  &lt;select name="numOfKids" id="numOfKids"&gt;
                      &lt;option value=""&gt;Select...&lt;/option&gt;
                      &lt;option value="1"&gt;1&lt;/option&gt;
                      &lt;option value="2"&gt;2&lt;/option&gt;
                      &lt;option value="3"&gt;3&lt;/option&gt;
                      &lt;option value="4"&gt;4&lt;/option&gt;
                      &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
  
  
              &lt;div class="form-group col-md-4"&gt;
                  &lt;label for="password"&gt;Password&lt;/label&gt;
                  &lt;input type="password" class="form-control" id="password" placeholder="Enter password" name="password"
                         required&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-md-4"&gt;
                  &lt;label for="confirmPassword"&gt;Confirm Password&lt;/label&gt;
                  &lt;input type="password" class="form-control" id="confirmPassword" placeholder="Re-enter password"
                         name="confirmPassword" required&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-md-12"&gt;
                  &lt;label for="userRole"&gt;Register as &lt;/label&gt;
                  &lt;select name="userRole" id="userRole" required&gt;
                      &lt;option value=""&gt;Select...&lt;/option&gt;
                      &lt;option value="user"&gt;Individual User&lt;/option&gt;
                      &lt;option value="admin"&gt;Admin&lt;/option&gt;
                      &lt;option value="organization"&gt;Organization&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;button type="submit" class="btn btn-danger btn-success"
          "&gt;Register&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      // Get the modal
      var modal = document.getElementById('id01');
  
      // When the user clicks anywhere outside of the modal, the modal with close
      window.onclick = function (event) {
          if (event.target == modal) {
              modal.style.display = "none";
          }
      }
  
      // Get the modal
      var modalTwo = document.getElementById('id02');
  
      // When the user clicks anywhere outside of the modal, the modal with close
      window.onclick = function (event) {
          if (event.target == modalTwo) {
              modal.style.display = "none";
          }
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If you're interested, the project is being saved in a GitHub repository at : <a href="https://github.com/ad410project/ad410project" rel="nofollow noreferrer">https://github.com/ad410project/ad410project</a> I'm sure it's possible some crazy php issue, but any help or suggestions would be appreciated.</p>