<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Waterwheel with owl carousel 2</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="carrousel">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="card-container">
<div class="big-circle">
<div class="small-circle">
<i class="icon fas fa-plus"></i>
</div>
</div>
<div class="card">
<p class="title">Adicionar Taxonomia</p>
</div>
</div>
<div class="card-container">
<div class="big-circle">
<div class="small-circle">
<i class="icon fas fa-plus"></i>
</div>
</div>
<div class="card">
<p class="title">Biblioteca</p>
</div>
</div>
<div class="card-container">
<div class="big-circle">
<div class="small-circle">
<i class="icon fas fa-plus"></i>
</div>
</div>
<div class="card">
<p class="title">Know-how</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<button id="play-carousel" type="button" class="btn btn-dark">Play</button>
<div class="status"></div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script><script src="./script.js"></script>
</body>
</html>
#carrousel {
margin: 10px;
}
@media (max-width: 768px) {
#carrousel {
margin: 70px 0px 0px 0px;
}
}
@media (max-width: 425px) {
#carrousel {
margin: 50px 0px 0px 0px;
}
}
#carrousel .title {
padding: 0px 15px;
text-align: center;
line-height: 26px;
margin-top: 60px;
font-size: 24px;
color: #fff;
}
#carrousel .owl-carousel .card-container {
height: 200px;
}
#carrousel .owl-carousel .card-container .big-circle {
background: #329197;
background: linear-gradient(205deg, #329197 0%, #43c1ca 35%, rgba(133, 223, 227, 0) 100%);
top: 0;
border-radius: 100px;
height: 80px;
width: 80px;
display: block;
margin: 0 auto;
padding-top: 10px;
}
#carrousel .owl-carousel .card-container .small-circle {
background: #3CACB4;
height: 60px;
width: 60px;
border-radius: 100px;
margin: 0 auto;
display: block;
}
#carrousel .owl-carousel .card-container .icon {
color: #fff;
margin: 0 auto;
font-size: 20px;
padding-top: 20px;
text-align: center;
width: 60px;
}
#carrousel .owl-carousel .card-container .card {
background: #329197;
background: linear-gradient(180deg, #329197 0%, #43c1ca 35%, rgba(133, 223, 227, 0) 100%);
border: 0px solid;
border-radius: 10px;
max-height: 100%;
max-width: 100%;
width: auto;
height: 170px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -9;
}
#carrousel .owl-carousel .owl-item {
height: 200px;
position: relative;
transform: scale(0.7);
-ms-transform: scale(0.7);
transition: all .2s;
-webkit-transform: all .2s;
z-index: 1;
}
@media (max-width: 768px) {
#carrousel .owl-carousel .owl-item {
height: 270px;
}
}
@media (max-width: 380px) {
#carrousel .owl-carousel .owl-item {
height: 200px;
}
}
#carrousel .owl-carousel .owl-stage-outer {
padding-bottom: 10px;
}
#carrousel .owl-item.big {
transform: scale(1);
-ms-transform: scale(1);
z-index: 3;
}
#carrousel .owl-item.medium {
transform: scale(0.8);
-ms-transform: scale(0.8);
z-index: 2;
}
#carrousel .owl-item.medium.mdright {
/*border: solid 1px red;*/
position: relative;
left: -30px;
}
@media (min-width: 768px) {
#carrousel .owl-item.medium.mdright {
left: 0px;
}
}
#carrousel .owl-item.medium.mdleft {
/*border: solid 1px blue;*/
position: relative;
right: -30px;
}
@media (min-width: 768px) {
#carrousel .owl-item.medium.mdleft {
right: 0px;
}
}
#carrousel .owl-item.smallRight.active {
transform: scale(0.7);
-ms-transform: scale(0.7);
position: relative;
left: -30px;
}
#carrousel .owl-item.smallLeft.active {
transform: scale(0.7);
-ms-transform: scale(0.7);
position: relative;
right: -30px;
}
#carrousel .owl-nav {
position: absolute;
top: 30%;
width: 100%;
}
#carrousel .owl-nav .owl-prev {
position: absolute;
left: 0px;
top: 10px;
background: transparent !important;
color: #000 !important;
font-size: 40px !important;
}
#carrousel .owl-nav .owl-prev:hover {
color: #adadad !important;
}
#carrousel .owl-nav .owl-next {
position: absolute;
right: 0px;
top: 10px;
background: transparent !important;
color: #000 !important;
font-size: 40px !important;
}
#carrousel .owl-nav .owl-next:hover {
color: #adadad !important;
}
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
nav: true,
items: 5,
navText: ['',''],
responsive:{
0:{
items: 2,
},
768:{
items: 3,
},
990:{
items: 5,
}
},
onInitialized: coverFlowEfx,
onTranslate: coverFlowEfx,
});
function coverFlowEfx(e){
if ($('.owl-dots')) {
$('.owl-dots').remove();
}
idx = e.item.index;
$('.owl-item.big').removeClass('big');
$('.owl-item.medium').removeClass('medium');
$('.owl-item.mdright').removeClass('mdright');
$('.owl-item.mdleft').removeClass('mdleft');
$('.owl-item.smallRight').removeClass('smallRight');
$('.owl-item.smallLeft').removeClass('smallLeft');
$('.owl-item').eq(idx -1).addClass('medium mdleft');
$('.owl-item').eq(idx).addClass('big');
$('.owl-item').eq(idx + 1).addClass('medium mdright');
$('.owl-item').eq(idx + 2).addClass('smallRight');
$('.owl-item').eq(idx - 2).addClass('smallLeft');
}
var click = false;
$('#play-carousel').click(function(evt) {
click = !click;
if(click){
$('.status').html('Autoplay: ON');
$('.owl-carousel').trigger('play.owl.autoplay', [1000, 1000]);
$(this).html("Stop");
} else {
$('.owl-carousel').trigger('stop.owl.autoplay');
$(this).html("Play");
$('.status').html('Autoplay: OFF');
}
});