<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">
<img src="https://www.theonenessfield.com/wp-content/uploads/2017/12/Tof7.jpg">
</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">
<img src="https://ekam.org/wp-content/uploads/2017/12/tof27.jpg">
</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">
<img src="https://www.symbiosis.ac.in/Symbiosis-International-University/images/SIU_Main1.jpg">
</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">
<img src="https://www.theonenessfield.com/wp-content/uploads/2017/12/Tof7.jpg">
</div>
<div class="text-box text-center">
<h4><strong>This is demo heding</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">
<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>This is demo heding</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 ">
<img src="https://ekam.org/wp-content/uploads/2017/12/tof27.jpg">
</div>
<div class="text-box text-center">
<h4><strong>This is demo heding</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">
<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>This is demo heding</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><!-- end row-->
</div><!-- end container-->
</section>
<!-- section end----->
<!-- section start here-->
<section class="sec2">
<div class="container">
<div class="row">
<div class="col-md text-center">
<h1>Multi Item slick Carousel for</h1>
<p>Show 3 Items In Desktop 2 In Tab And 1 In Mobile</p>
</div>
</div>
<!--end row-->
<div class="row slider2">
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>Item Carousel</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>Item Carousel</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>Item Carousel</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>Item Carousel</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>Item Carousel</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>Item Carousel</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>This is demo</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>This is demo</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
<div class="col">
<div class="item-box">
<div class="item-img">
<img src="https://browze.com/media/catalog/product/cache/1/image/350x450/9df78eab33525d08d6e5fb8d27136e95/9/H/9H-Scratch-Proof-For-iPhone-7-Matte-Tempered-Glass-Screen-Protector-For-Apple-iPhone-6-6s__1.jpg">
<div class="hover-box">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
</div>
</div><!-- end item img-->
<div class="text-box-2 text-center">
<h4>This is demo</h4>
<p><strike>$289.00</strike> <samp>$250.55</samp></p>
<button class="btn btn-info">Buy Now</button> <button class="btn btn-success">Add To Cart</button>
</div>
</div>
<!-- end item box-->
</div>
<!--end col here-->
</div>
</div><!--container end-->
</section>
<!--section end-->
<section style="background:#000; padding:50px 0; color:#fff">
<div class="container">
<div class"row">
<h1 class="text-center" style="color:red"> java script Note</h1>
<h3>if you want fade Carousel Use fade: true,</h3>
<p> For Example</p>
<code>
$('.slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
fade: true,
});
</code>
<h3>if you Dont wnat Dots</h3>
<p> For Example</p>
<code>
$('.slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
fade: true,
dots: false,
});
</code>
<h3>if you Dont wnat Arrow</h3>
<p> For Example</p>
<code>
$('.slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
fade: true,
dots: false,
arrows: false,
});
</code>
<h3>if you want center div active</h3>
<p> For Example</p>
<code>
$('.slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
centerMode: true,
fade: true,
dots: false,
arrows: false,
});
</code>
</div>
</div>
</section>
.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{
opacity: 1;
bottom:0;
}
$('.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,
slidesToScroll: 1,
dots: true,
autoplay: true,
speed: 300,
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
]
});
