Carousel Bootstrap4
<!DOCTYPE html>
<html>
<head>
<title>CAROUSEL BOOTSTRAP4 | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="CAROUSEL BOOTSTRAP4">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-5">
<form class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 col-12 mt-2 mb-2">
<div id="menuCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://source.unsplash.com/random/" class="img-fluid"
alt="name 1" title="name 1">
<div class="carousel-caption">
<h4 class="bold txt-shadow">
<a href="#">
<i class="fa fa-globe"></i> name 1
</a>
</h4>
<p ></p>
</div>
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/" class="img-fluid"
alt="name 2" title="name 2">
<div class="carousel-caption">
<h4 class="bold txt-shadow">
<a href="#">
<i class="fa fa-globe"></i> name 2
</a>
</h4>
<p ></p>
</div>
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/" class="img-fluid"
alt="name 3" title="name 3">
<div class="carousel-caption">
<h4 class="bold txt-shadow">
<a href="#">
<i class="fa fa-globe"></i> name 3
</a>
</h4>
<p ></p>
</div>
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/" class="img-fluid"
alt="name 4" title="name 4">
<div class="carousel-caption">
<h4 class="bold txt-shadow">
<a href="#">
<i class="fa fa-globe"></i> name 4
</a>
</h4>
<p ></p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#menuCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#menuCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
.txt-shadow{
text-shadow: 1px 1px 1px #000;
}
.txt-shadow a{
text-decoration: none;
color: #fff;
}
#menuCarousel{
border: 2px solid #000;
width: 100%;
}
#menuCarousel img{
width: 100%;
height: 400px;
}
#menuCarousel p{
opacity: 0;
}
#menuCarousel h4{
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.5);
padding: 5px;
width: 100%;
text-align: center;
font-size: 1rem;
}
.carousel-caption{
position: absolute;
right: 4%;
bottom: 0px;
left: 4%;
z-index: 100;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
}
