<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 ----------> <section class="container pt-3"> <div class="row"> <div class="col-lg-12"> <h1>Bootstrap 4 Card Slider</h1> </div> </div> </section> <section class="carousel slide" data-ride="carousel" id="postsCarousel"> <div class="container"> <div class="row"> <div class="col-12 text-md-right lead"> <a class="btn btn-outline-secondary prev" href="#!" title="go back">PREV</a> <a class="btn btn-outline-secondary next" href="#!" title="more">NEXT</a> </div> </div> </div> <div class="container pt-0 mt-2 carousel-inner"> <div class="row row-equal carousel-item active mt-0"> <div class="col-md-4"> <div class="card"> <div class="card-img-top card-img-top-250"> <img class="img-fluid" src="http://i.imgur.com/EW5FgJM.png" alt="Carousel 1"> </div> <div class="card-block pt-2"> <h6 class="small text-wide pb-2">Insight</h6> <h2> <a href>Why Stuff Happens Every Year.</a> </h2> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-img-top card-img-top-250"> <img class="img-fluid" src="http://i.imgur.com/Hw7sWGU.png" alt="Carousel 2"> </div> <div class="card-block pt-2"> <h6 class="small text-wide pb-2">Development</h6> <h2> <a href>How to Make Every Line Count.</a> </h2> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-img-top card-img-top-250"> <img class="img-fluid" src="http://i.imgur.com/g27lAMl.png" alt="Carousel 3"> </div> <div class="card-block pt-2"> <h6 class="small text-wide pb-2">Design</h6> <h2> <a href>Responsive is Essential.</a> </h2> </div> </div> </div> </div> <div class="row row-equal carousel-item mt-0"> <div class="col-md-4"> <div class="card"> <div class="card-img-top card-img-top-250"> <img class="img-fluid" src="//visualhunt.com/photos/l/1/office-student-work-study.jpg" alt="Carousel 4"> </div> <div class="card-block pt-2"> <h6 class="small text-wide pb-2">Another</h6> <h2> <a href>Tagline or Call-to-action.</a> </h2> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-img-top card-img-top-250"> <img class="img-fluid" src="//visualhunt.com/photos/l/1/working-woman-technology-computer.jpg" alt="Carousel 5"> </div> <div class="card-block pt-2"> <h6 class="small text-wide pb-2"><span class="pull-xs-right">12.04</span> Category 1</h6> <h2> <a href>This is a Blog Title.</a> </h2> </div> </div> </div> <div class="col-md-4 fadeIn wow"> <div class="card"> <div class="card-img-top card-img-top-250"> <img class="img-fluid" src="//visualhunt.com/photos/l/1/people-office-team-collaboration.jpg" alt="Carousel 6"> </div> <div class="card-block pt-2"> <h6 class="small text-wide pb-2">Category 3</h6> <h2> <a href>Catchy Title of a Blog Post.</a> </h2> </div> </div> </div> </div> </div> </section>

/* equal card height */ .row-equal > div[class*='col-'] { display: flex; flex: 1 0 auto; } .row-equal .card { width: 100%; } /* ensure equal card height inside carousel */ .carousel-inner>.row-equal.active, .carousel-inner>.row-equal.next, .carousel-inner>.row-equal.prev { display: flex; } /* prevent flicker during transition */ .carousel-inner>.row-equal.active.left, .carousel-inner>.row-equal.active.right { opacity: 0.5; display: flex; } /* control image height */ .card-img-top-250 { max-height: 250px; overflow:hidden; }

(function($) { "use strict"; // manual carousel controls $('.next').click(function(){ $('.carousel').carousel('next');return false; }); $('.prev').click(function(){ $('.carousel').carousel('prev');return false; }); })(jQuery);