Bootstrap 4 Cards carousel

In this example below you will see how to do a Bootstrap 4 Cards carousel with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mephysto, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mephysto ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap 4 Cards carousel </title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="row">
     <div class="col-sm-12">
     
       <div class="controls">
         <button type="button" class="btn-prev">prev</button>
         <button type="button" class="btn-next">next</button>
       </div>
      <div class="carousel-container">
        <ul>
          <li>
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
              </div>
            </div>
          </li>
        </ul>
       </div>
    </div>
  </div>
</div>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mephysto/bootstrap-4-cards-carousel-qZdopK */
body {
  perspective: 1000px;
}

.container {
  padding-top: 20px;
  background: #bada55;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  float: left;
}

.card img {
  display: block;
  max-width: 100%;
  height: auto;
}

.owl-item {
  transition: all 250ms ease-out;
  transform: translate3d(0px, 0px, 0px) scale(1);
}
.owl-item.active {
  transform: translate3d(0px, 0px, -10px) scale(1) rotateY(75deg);
}
.owl-item.active + .active {
  transform: translate3d(0px, 0px, 10px) scale(1);
}
.owl-item.active + .active + .active {
  transform: translate3d(0px, 0px, 20px) scale(1);
}
.owl-item.active + .active + .active + .active {
  transform: translate3d(0px, 0px, 10px) scale(1);
}
.owl-item.active + .active + .active + .active + .active {
  transform: translate3d(0px, 0px, -10px) scale(1) rotateY(-75deg);
}


/*Downloaded from https://www.codeseek.co/mephysto/bootstrap-4-cards-carousel-qZdopK */
$('ul').owlCarousel({
  items: 5,
  addClassActive: true
});

Comments