"Slick slider cards"
Bootstrap 4.1.1 Snippet by imsachin

<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 href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="row multiple-latest latest"> <div class="col-sm-12"> <div class="card"> <img class="w-100" src="images/featured-banner.png" alt="images"> <div class="card-body"> <p class="title"><a href="">What is ICO and how to lauch it swifty?</a></p> <div class="row first-line"> <div class="col-sm-8 col-8"> <h6>John Rivera</h6> </div> <div class="col-sm-4 col-4 text-end"> <p><i class="fa fa-eye"></i> 60</p> </div> </div> <div class="row second-line"> <div class="col-sm-7 col-6"> <h6 class="text-muted">Product / Startups</h6> </div> <div class="col-sm-5 col-6 text-end"> <h5 class="text-muted">05 Sep 2021</h5> </div> </div> </div> </div> </div> <div class="col-sm-12"> <div class="card"> <img class="w-100" src="images/featured-banner.png" alt="images"> <div class="card-body"> <p class="title"><a href="">What is ICO and how to lauch it swifty?</a></p> <div class="row first-line"> <div class="col-sm-8 col-8"> <h6>John Rivera</h6> </div> <div class="col-sm-4 col-4 text-end"> <p><i class="fa fa-eye"></i> 60</p> </div> </div> <div class="row second-line"> <div class="col-sm-7 col-6"> <h6 class="text-muted">Product / Startups</h6> </div> <div class="col-sm-5 col-6 text-end"> <h5 class="text-muted">05 Sep 2021</h5> </div> </div> </div> </div> </div> <div class="col-sm-12"> <div class="card"> <img class="w-100" src="images/featured-banner.png" alt="images"> <div class="card-body"> <p class="title"><a href="">What is ICO and how to lauch it swifty?</a></p> <div class="row first-line"> <div class="col-sm-8 col-8"> <h6>John Rivera</h6> </div> <div class="col-sm-4 col-4 text-end"> <p><i class="fa fa-eye"></i> 60</p> </div> </div> <div class="row second-line"> <div class="col-sm-7 col-6"> <h6 class="text-muted">Product / Startups</h6> </div> <div class="col-sm-5 col-6 text-end"> <h5 class="text-muted">05 Sep 2021</h5> </div> </div> </div> </div> </div> <div class="col-sm-12"> <div class="card"> <img class="w-100" src="images/featured-banner.png" alt="images"> <div class="card-body"> <p class="title"><a href="">What is ICO and how to lauch it swifty?</a></p> <div class="row first-line"> <div class="col-sm-8 col-8"> <h6>John Rivera</h6> </div> <div class="col-sm-4 col-4 text-end"> <p><i class="fa fa-eye"></i> 60</p> </div> </div> <div class="row second-line"> <div class="col-sm-7 col-6"> <h6 class="text-muted">Product / Startups</h6> </div> <div class="col-sm-5 col-6 text-end"> <h5 class="text-muted">05 Sep 2021</h5> </div> </div> </div> </div> </div> <div class="col-sm-12"> <div class="card"> <img class="w-100" src="images/featured-banner.png" alt="images"> <div class="card-body"> <p class="title"><a href="">What is ICO and how to lauch it swifty?</a></p> <div class="row first-line"> <div class="col-sm-8 col-8"> <h6>John Rivera</h6> </div> <div class="col-sm-4 col-4 text-end"> <p><i class="fa fa-eye"></i> 60</p> </div> </div> <div class="row second-line"> <div class="col-sm-7 col-6"> <h6 class="text-muted">Product / Startups</h6> </div> <div class="col-sm-5 col-6 text-end"> <h5 class="text-muted">05 Sep 2021</h5> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <script src="custom.js"></script> <script> $('.multiple-latest').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 1, dots: false, // variableWidth: true, // outerEdgeLimit: false, speed: 300, autoplay: true, arrows: true, prevArrow: '<div class="slick-custom-arrow slick-custom-arrow-left"><i class="fa fa-chevron-left"></i></div>', nextArrow: '<div class="slick-custom-arrow slick-custom-arrow-right"><i class="fa fa-chevron-right"></i></div>', responsive: [{ breakpoint: 1025, settings: { slidesToShow: 2, slidesToScroll: 1, infinite: true, dots: false, } }, { breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } }] }); </script> </body> </html>
.multiple-latest .card { margin: 2px 10px; display: none; } .slick-custom-arrow { position: absolute; transform: translateY(-50%); z-index: 100; background-color: transparent; color: $black; :hover { cursor: pointer; background-color: transparent; color: $black; } &-right { right: -30px; top: 50%; } &-left { left: -30px; top: 50%; } } .multiple-latest { .slick-custom-arrow-left { .fa-chevron-left { position: absolute; left: 15px; top: 55%; width: 30px; height: 30px; box-shadow: 0px 0px 5px #000; border-radius: 50%; text-align: center; line-height: 30px; font-size: 14px; } } .slick-custom-arrow-right { .fa-chevron-right { position: absolute; right: 15px; top: 55%; width: 30px; height: 30px; box-shadow: 0px 0px 5px #000; border-radius: 50%; text-align: center; line-height: 30px; font-size: 14px; } } } .multiple-latest.slick-initialized .card { display: block; }

Related: See More


Questions / Comments: