<!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
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
OWL Carousel
Twitter Bootstrap
jQuery
