"bootstrap 4 carousel slider"
Bootstrap 4.0.0 Snippet by entropia13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" rel="stylesheet">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2">
<h4>Present your <br>
awesome product</h4>
<p>Lorem ipsum dolor sit amet. Reprehenderit, qui blanditiis quidem rerum <br>
necessitatibus praesentium voluptatum deleniti atque corrupti.</p>
<a href="#">BUY NOW</a> </div>
<div class="col-md-5 col-12 order-md-2 order-1"><img src="https://i.imgur.com/NKvkfTT.png" class="mx-auto" alt="slide"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2">
<h4>Present your <br>
awesome product</h4>
<p>Lorem ipsum dolor sit amet. Reprehenderit, qui blanditiis quidem rerum <br>
necessitatibus praesentium voluptatum deleniti atque corrupti.</p>
<a href="#">BUY NOW</a> </div>
<div class="col-md-5 col-12 order-md-2 order-1"><img src="https://i.imgur.com/duWgXRs.png" class="mx-auto" alt="slide"></div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#myCarousel .carousel-item .mask {
position: absolute;
top: 0;
left:0;
height:100%;
width: 100%;
background-attachment: fixed;
}
#myCarousel h4{
font-size:50px;
margin-bottom:15px;
color:#FFF;
line-height:100%;
letter-spacing:0.5px;
font-weight:600;
}
#myCarousel p{
font-size:18px;
margin-bottom:15px;
color:#d5d5d5;
}
#myCarousel .carousel-item a{background:#F47735; font-size:14px; color:#FFF; padding:13px 32px; display:inline-block; }
#myCarousel .carousel-item a:hover{background:#394fa2; text-decoration:none; }
#myCarousel .carousel-item h4{-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;}
#myCarousel .carousel-item p{-webkit-animation-name:slideInRight; animation-name:slideInRight;}
#myCarousel .carousel-item a{-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
#myCarousel .carousel-item .mask img{-webkit-animation-name:slideInRight; animation-name:slideInRight; display:block; height:auto; max-width:100%;}
#myCarousel h4, #myCarousel p, #myCarousel a, #myCarousel .carousel-item .mask img{-webkit-animation-duration: 1s;
animation-duration: 1.2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#myCarousel .container {max-width: 1430px; }
#myCarousel .carousel-item{height:100%; min-height:550px; }
#myCarousel{position:relative; z-index:1; background:url(https://i.imgur.com/6axE29k.jpg) center center no-repeat; background-size:cover; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$('#myCarousel').carousel({
interval: 3000,
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Most classes are named #myCarousel. This causes conflicts if you're using more than one Bootsnipp template in one project if you didn't change these class names to be unique.

mydhe (-1) - 5 years ago - Reply -1


e

xhat007 (1) - 3 years ago - Reply 0


Not working in angular, I don't know the reason but anything is not showing except the next , previous icon.

rameshkumarpaswaniit (-1) - 5 years ago - Reply -1


e

xhat007 (1) - 3 years ago - Reply 0


not working, don't know why. It's totally blank

iamekowprince () - 4 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0