试图通过两条线获得自定义和无限的猫头鹰轮播

Trying to get custom and unlimited Owl carousel over two lines

本文关键字:无限 猫头鹰 自定义 两条线      更新时间:2023-09-26

这是小提琴:

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

我希望得到这个:

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

两行行为。

我尝试使用:

p:nth-child(7n) {
}

无济于事?

检查这个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;
     }