I've created a CodePen with what I thought was a functional slider, but for some reason, the JavaScript isn't working. The setup includes bootstrap.css, jquery.js, and bootstrap.js. I'm having trouble pinpointing what's missing that's causing the sliding to not work.
You can find the bootstrap.css file at https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css
The jquery file is located at https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js
And the bootstrap.js file can be found at https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js
You can view the CodePen here: https://codepen.io/sharpdesigner/pen/mqvYMp
Here is the HTML code snippet:
<body>
<div class="call-to-action">
<h1>Create and share your whatever</h1>
<h2>Make it easy for you to do whatever this thing does.</h2>
<a class="big-button" href="" title="">Create Project</a>
<div class="clear"></div>
<a class="view-demo" href="" title="">View Demo</a>
</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://images.unsplash.com/photo-1507915600431-5292809c5ab7?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
</div>
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1511022406504-605119708377?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
CSS:
.carousel-inner {
width: 100%;
display: inline-block;
position: relative;
}
.carousel-inner {
padding-top: 43.25%;
display: block;
content: "";
}
.carousel-item {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: skyblue;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.call-to-action {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 60%;
z-index: 9;
margin-top: 20px;
text-align: center;
}
.call-to-action h1 {
font-size: 52px;
font-weight: 700;
margin-bottom: 23px;
}
.call-to-action h2 {
font-size: 26px;
font-weight: 300;
}
a.big-button {
color: #fff;
font-size: 19px;
font-weight: 700;
text-transform: uppercase;
background: #eb7a00;
background: rgba(235, 122, 0, 0.75);
padding: 28px 35px;
border-radius: 3px;
margin-top: 80px;
margin-bottom: 0;
display: inline-block;
}
a.big-button:hover {
text-decoration: none;
background: rgba(235, 122, 0, 0.9);
}
a.view-demo {
color: #000;
font-size: 21px;
font-weight: 700;
display: inline-block;
margin-top: 35px;
}
a.view-demo:hover {
text-decoration: none;
color: #333;
}
.carousel-indicators .active {
background: #000;
}
.carousel-indicators li {
background: rgba(0, 0, 0, 0.5);
}