// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 8000
})
});#myCarousel {
position: center;
padding: 2em;
}
/* Thumbnail Box */
.caption h4 {
font-size: 22px;
color: #ffffff;
text-align: left;
}
.btn.btn-mini {
font-size: 18px;
background-color: #00bcb3;
color: #ffffff;
}
/* Carousel Control */
.control-box {
text-align: right;
width: 100%;
}
.carousel-control{
background: #000000;
display: inline-block;
font-size: 34px;
font-weight: 600;
line-height: 25px;
opacity: 100;
padding: 4px 10px 0px;
position: static;
height: 40px;
width: 40px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
<div class="item">
<ul class="thumbnails">
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide2 -->
<div class="item">
<ul class="thumbnails">
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide3 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->Hi, I'm wanting to put together a carousel like this example in Boostraps 4 but it does not work for me. someone knows if boostraps 4 can continue to use this type of carouseles ??? because I copy the code as such to the example and in 3 walks, but when I link style sheet and script of 4 does not work. Very weird the truth!