Owl Carousel Multiple Rows

Owl carousel multiple rows

A simple idea using flex

$('.owl-carousel').owlCarousel({    loop:true,    margin:10,    items:1,    nav: true})

.owl-carousel .item {    background: #4DC7A0;    padding: 1rem;}
body{  padding: 10px;}.flex-container {  display: flex;  flex-wrap: nowrap;  background-color: DodgerBlue;}
.flex-container > div {  background-color: #f1f1f1;  width: 100px;  margin: 10px;  text-align: center;  line-height: 75px;  font-size: 30px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/><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.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">    <div class="item">      <div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div><div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div>          </div>    <div class="item">      <div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div><div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div>          </div></div>

Owl Carousel two rows issue

You need to also do a check for if it's the last post and if it is omit the adding of echo '</div><div class="item-wrapper">';

Something like this:

if ($i % 2 == 0 && ($the_query->found_posts != $i)) {
    echo '</div><div class="item-wrapper">';
} // if multiple of 3 close div and open a new div

Related Topics