https://codepen.io/dukecroc/pen/gzMrjx
Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/OwlCarousel2/OwlCarousel2/develop/dist/owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div> Content 1</div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
<div> Content 8</div>
<div> Content 9</div>
<div> Content 10</div>
<div> Content 11</div>
<div> Content 12</div>
<div> Content 13</div>
<div> Content 14</div>
<div> Content 15</div>
</div>
</body>
<script>
$(".owl-carousel").owlCarousel({
nav: false,
dots: false,
loop: false,
rewind: true,
stagePadding: 0,
margin: 4,
checkVisibility: true,
navElement: 'div',
responsive: {
0: {
items: 1,
slideBy: 1
},
768: {
items: 2,
slideBy: 2
},
1024: {
items: 3,
slideBy: 3
},
1280: {
items: 4,
slideBy: 4
},
1440: {
items: 5,
slideBy: 1
}
}
});
</script>
</html>$offset-padding-item: 40%;
$offset-padding-wrap: 8%; // (width of ".owl-carousel") / 5 * 40%
$bgc-owl-carousel: Aqua;
$bgc-owl-stage-outer: AliceBlue;
$bgc-item-odd: LightGreen;
$bgc-item-even: LightBlue;
$bdc-item-border: Brown;
* {
box-sizing: border-box;
transition: all .5s ease;
}
.owl-carousel {
position: relative;
width: 100%;
max-width: 80%;
margin: 20px auto;
padding: 10px $offset-padding-wrap;
border: 2px solid $bgc-owl-carousel;
background-color: transparent;
overflow: hidden;
box-sizing: content-box;
&:hover {
background-color: $bgc-owl-carousel;
}
.owl-stage-outer {
overflow: visible;
&:hover {
background-color: $bgc-owl-stage-outer;
}
// vertical centering border-line
&:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 10px;
right: 10px;
height: 1px;
background-color: #ccc;
}
}
}
.owl-stage {
height: 300px;
}
.owl-item {
float: left;
position: relative;
height: calc(50% - 10px);
transition: opacity 1s ease;
&:not(.active) {
opacity: 0;
}
// For easy testing border-line
&:after {
content: '';
display: block;
position: absolute;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid $bdc-item-border;
opacity: 0;
transition: opacity .5s ease;
@at-root .owl-carousel:hover & {
opacity: 1;
}
}
>div {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: calc(100% + #{$offset-padding-item} * 2);
height: 100%;
opacity: .5;
}
&:nth-child(odd)>div {
top: 0;
background: $bgc-item-odd;
}
&:nth-child(even)>div {
top: calc(100% + 20px);
background-color: $bgc-item-even;
}
}