I just want to show multiple rows and with owl dots. Like this way.
But it seems there are no nay inbuilt option for this. So I tried to give
.owl-item {
width: 20%;
}
so it will be in 5 items in row. But it didn't work at all. I think plugin styles will be applied.
Here is the fiddle. https://jsfiddle.net/7mt5aL2x/
Any solutions?
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>
