包含两项

Question

我有一个bootstrap carousel（bootstrap 3.2），其中我使用jquery将活动类分配给第一个元素。旋转木马的内容是动态拉动的，这就是我这样做的原因。 这是代码

Html：

<div id="Carousel2" class="carousel slide">
     <div class="carousel-inner" id="test">
       <div class="item active"><p>test1</p></div>
       <div class="item"><p>test2</p></div>
       <div class="item"><p>test3</p></div>
       <div class="item"><p>test4</p></div>
       <div class="item"><p>test5</p></div>
       <div class="item"><p>test6</p></div>
  </div>
     <a data-slide="prev" href="#Carousel2" class="left carousel-control">&lt;</a>
         <a data-slide="next" href="#Carousel2" class="right carousel-control">&gt;</a>
    </div>

JS：

<script>
$( document ).ready(function() {
$(".carousel-inner div:first").addClass("active");
});
</script>

CSS：

.carousel-indicators {
  bottom:20px;
  position: absolute;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li, .carousel-indicators li.active {
  background-color: #E3E3E4;
    border: 1px solid #B6B7B9;
    width: 15px;
    height: 15px;
    margin:0;
    display: inline-block;
    text-indent: -999px;
    border-radius: 10px;
    cursor: pointer;
}
.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img {
  display: block;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
ul.thumbnails-carousel img {
    margin: 0 auto;
    object-fit: cover;
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
}
ul.product-images.thumbnails-carousel {
  padding-top: 0;
}
@media only screen and (min-width: 749px){
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {

      line-height: 1;
      width: 100%;
  }
}
@media only screen and (min-width: 1025px){
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    line-height: 1;
    width: 100%;
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.product-featured h2 {
  font-size: 20px;
  text-align: left;
}
.product-featured .featured-collection {
  margin:80px auto;
}
.product-top-description {
  width:60%;
  text-align: center;
  margin: 0 auto;
  padding: 30px 0;
}
[data-slide-to] {
    cursor: pointer;
}
a.right.carousel-control {
    position: absolute;
    top: 25%;
    right: 0;
}
a.left.carousel-control {
    position: absolute;
    top: 25%;
}

这很好用，但我需要每行显示2个项目。所以在开始时test1和test2需要显示，然后点击它转到test3和test4等。

我不能把这两个元素放在一个项目中，就像我上面所说的那样，内容是动态提取的。

在这种情况下如何实现这一目标？