Owl-carousel2 DEMO - items in 2 rows (oke)

https://codepen.io/dukecroc/pen/gzMrjx

<!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;
 }
}

PreviousHow can I add class to the first and last item among the visible items of Owl Carousel 2? (ok)NextHow can I create a carousel slick with multiple rows? (ok)

Last updated 4 years ago