Bootstrap 4 Carousel component Issue
<p>I am trying to implement Carousel Bootstrap 4 to a personal project. I have basic understanding of HTML5, CSS3, Bootstrap 4 and JS. I have look to several discussions and tutorials on how to use the carousel component, but cannot get the correct output in the browser. I use chrome and firefox and have the same problem in both browsers. I already check the paths of (link) and (script) , I even had to change the (img data-src="#") to (img src="#") so the images could load properly into the browser. The images are on top of each other and don't know how to correct this problem. I copy the code directly from the Bootstrap website. This is my first time in a community and my first question. Just feeling a bit of frustration with this component.</p>

<p>Thanks in advance!</p>

<p><a href="http://i.stack.imgur.com/1reLh.png" rel="nofollow">Image example of problem in browser</a></p>

<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, initial-scale=1, shrink-to-fit=no"&gt;
  &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;

  &lt;title&gt;Carousel-testing!&lt;/title&gt;
  &lt;link rel="stylesheet" href="assets\css\bootstrap.css"&gt;
  &lt;link rel="stylesheet" href="assets\css\bootstrap-theme.css"&gt;
  &lt;link rel="stylesheet" href="assets\css\app.css"&gt;
  &lt;link rel="stylesheet" href="assets\css\animate.css"&gt;

  &lt;script type="text/javascript" src="assets\js\jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets\js\bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets\js\app.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;nav&gt;

&lt;/nav&gt;

&lt;section id="carousel"&gt;

  &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;img src="assets\images\2736779-casino-roulette-in-water-and-fire-isolated-on-black-background.jpg" alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img src="assets\images\DealerBust.jpg" alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img src="assets\images\FH_Gaming_Main-new.jpg" alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
      &lt;span class="icon-prev" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;span class="icon-next" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;body&gt;


&lt;/body&gt;

&lt;/html&gt;
</code></pre>