As someone who is new to coding, I have been attempting to create a slider on Bootstrap, but it seems to be displaying more like a background than an actual slider.
Here is an excerpt of my HTML code:
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class= "container">
<div class="navbar-header">
<a class="navbar-brand" href"#">
<img src="img/logowine.png" alt="winelogo">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#about">About </a>
</li>
<li>
<a href="#product">Products</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/carousel1.jpg" alt="portdicksonrj" class="img-responsive">
</div>
<div class="item">
<img src="img/carousel2.jpg" alt="portdicksonrjice" class="img-responsive">
</div>
<div class="item">
<img src="img/carousel3.jpg" alt="portdicksonrjlemon" class="img-responsive">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#carousel").carousel();
</script>
</body>