I'm having this weird problem where the controls won't show up for my bootstrap 4 beta carousel unless I place the controls links inside the carousel-inner div.
jquery & the bootstrap files are working because nothing else on the website is wrong (and I've used lots of jquery on it). The indicators also work fine without being inside "carousel inner".
I've copied and pasted this code directly from bootstrap's site, as well as trying to copy and paste from other examples. The controls are only appearing for me if I move them before the closing div for carousel-inner. All my divs are closed properly (I'm using brackets so it tells me if any aren't closed). The rest of my code is also basically copied and pasted from the bootstrap 4 page/examples. All I did was add more slides but this issue was occurring before that as well.
Only piece of custom css, which if I comment this out doesn't fix the controls problem. (it moves captions underneath slide instead of layered on top of slide, and moves indicators so they're above slides instead of layered on top.):
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-indicators {
position: relative;
margin: 0 auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCarousel" class="carousel slide bg-inverse hidden-mobile" data-ride="carousel">
<ol class="carousel-indicators" style="padding-bottom:2%;padding-top:2%;">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step1.gif" alt="First slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step2.gif" alt="Second slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step3.gif" alt="Third slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step4.gif" alt="Fourth slide" width="55%" height="auto">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step5.gif" alt="Fifth slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step6.gif" alt="Sixth slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next" onclick="$('#myCarousel').carousel('next')">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>