"Bootstrap 4 Slick Carousel, Multi Item Carousel Using Slick | Slick Carousel"
Bootstrap 4.1.1 Snippet by Pushpender

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<!-- add these link link on head --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<!---- for icon style------>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- section start here-->
<section class="sec1">
<div class="container">
<div class="row">
<div class="col-md-12 text-center gap-top-bottom">
<h1>Multi Item Bootstrap Carousel (Slick)</h1>
<h2>Show 4 Items In Desktop 2 In Tab And 1 In Mobile</<h2>
</div>
</div>
<div class="row slide1">
<div class="col-md-3">
<div class="img-box">
<img src="https://im.proptiger.com/1/151127/3/my-proptree-satyam-avenue-before-oct-13-364328.jpeg?width=800&height=620">
</div>
<div class="text-box text-center">
<h4><strong>Bootstrap 4 Carousel</strong></h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<!--end col-md-3-->
<div class="col-md-3">
<div class="img-box">
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
.gap-top-bottom{padding:70px 0;}
.img-box img{width:100%;}
.text-box h4{font-size:20px}
/**sec2 style**/
.sec2{padding:60px 0; border-top:1px solid #d9d9d9;}
.sec2 h1{color:red;}
.item-img {
position: relative;
transition: all ease-in-out 0.5s;
}
.hover-box {
position: absolute;
bottom: -100%;
width: 100%;
height: 100%;
transition: all ease-in-out 0.5s;
opacity: 0;
}
.hover-box ul {
padding-left: 0;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
.hover-box ul li {
color: gold;
font-size: 30px;
}
.text-box-2 h4{color:#28A745;}
.text-box-2 p samp{color:red;}
/***hover**/
.item-box:hover .hover-box{
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
$('.slide1').slick({
slidesToShow: 4,
slidesToScroll: 1,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
/**slider 2 js **/
$('.slider2').slick({
slidesToShow: 3,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rotating CSS Card
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: