"banner"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.js"></script>
<!-- banner -->
<div class="home-slider">
<div>
<img src="https://via.placeholder.com/1600x650" class="img-responsive" alt="">
</div>
<div>
<img src="https://via.placeholder.com/1600x650" class="img-responsive" alt="">
</div>
<div>
<img src="https://via.placeholder.com/1600x650" class="img-responsive" alt="">
</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
.home-slider .slick-dots {
display: block;
position: relative;
top: -40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.home-slider .slick-dots li button:before {
font-family: 'slick';
font-size: 10px;
}
.home-slider .slick-dots li button:before {
font-family: 'slick';
font-size: 10px;
}
.slick-next:before {
content: "\F285" !important;
font-family: 'bootstrap-icons' !important;
}
.slick-prev:before {
content: "\F284" !important;
font-family: 'bootstrap-icons' !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$('.home-slider').slick({
infinite: true,
dots: true,
arrows: false
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO Angular

Questions / Comments: