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;
}

                                    
SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Scroll to div ID

Scroll to div ID

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Loading style book loader

Loading style book loader

Image hover 01

Image hover 01

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Carousel Bootstrap4

Carousel Bootstrap4

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Buttons Styles Inspirations

Buttons Styles Inspirations

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Ajouter une pagination1

Ajouter une pagination1