javascript - 试图通过两条线获得自定义和无限的 Owl Carousel

Question

这是 fiddle :

https://jsfiddle.net/h8kmove5/41/

我希望得到这个:

https://jsfiddle.net/h8kmove5/43/

两行行为。

我尝试使用:

p:nth-child(7n) {
}

没用？

Answer 1

检查这个 https://jsfiddle.net/dhaileytaha/h8kmove5/44/

从此更改 CSS:

#sync1 .item{
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync1 .item.noItem{
background: none;
}
#sync2 {
 margin-left: 0%;  
}

#sync2 .item{
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .item h1{
font-size: 18px;
 }
#sync2 .synced .item{
 background: #0c83e7;
     } 

 #sync2 .owl-item:nth-child(7n) {
  clear: both;
 }

收件人:

#sync1 .item{
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync1 .item.noItem{
background: none;
}
#sync2 {
 margin-left: 0%;  
}

#sync2 .item{
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .item h1{
font-size: 18px;
 }
#sync2 .synced .item{
 background: #0c83e7;
     }