Javascript CSS多品牌名称滑块

我想知道是否有可能制作一个旋转木马来显示文本而不是图像，我试图制作一些东西，但效果不好。。。一次只显示一个项目，所以如果有人能帮助我，那就太好了

例如，我希望显示8个品牌名称：

单击箭头后：

我想使用纯文本而不是图像

我当前的html：

<div id="myCarousel" class="carousel slide">

  <div class="carousel-inner">
    <div class="item active">
      <div class="col-xs-4"><a href="#">JavaScript</a></div>
    </div>
    <div class="item">
      <div class="col-xs-4">HTML</a></div>
    </div>
    <div class="item">
      <div class="col-xs-4">CSS</a></div>
    </div>
    <div class="item">
      <div class="col-xs-4"><a href="#">JSON</a></div>
    </div>
    <div class="item">
      <div class="col-xs-4"><a href="#">AngularJS</a></div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

脚本：

$('#myCarousel').carousel({
  interval: 2000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  }
  else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

---

现在的问题是，它一次只为我显示一个项目，我想要4…

它正在与我合作，它一次显示多个品牌？因为对我来说，它只显示1，当我单击“下一个”或“上一个”时，它会相互替换。箭头是的，它显示3个品牌。为什么是三个？取决于左右百分比和“col-xs-4”。我还尝试了“col-xs-3”并降低了百分比，我得到了4个brandsyes，我知道现在应该是3，因为col-xs-4，如果我改为col-xs-3，那么它会显示4，。。。但在我的chrome和firefox浏览器中，每次只显示1个，当我点击下一步时，它会用下一个替换这个，我不知道如何修复它，我想我犯了一个错误…：）试着把js放在jquery.js和bootstrap.js下面——它在chrome和firefox中都很有效。它在这里和我一起工作，它一次显示多个品牌？因为对我来说，它只显示1，当我单击“下一个”或“上一个”时，它会相互替换。箭头是的，它显示3个品牌。为什么是三个？取决于左右百分比和“col-xs-4”。我还尝试了“col-xs-3”并降低了百分比，我得到了4个brandsyes，我知道现在应该是3，因为col-xs-4，如果我改为col-xs-3，那么它会显示4，。。。但问题是在我的chrome和firefox中，它一次只显示1个，当我单击next时，它会用下一个替换掉这个，我不知道如何修复它，我想我犯了一个错误…：）试着把js放在jquery.js和bootstrap.js下面——chrome和firefox都可以使用。

$('#myCarousel').carousel({
  interval: 2000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  }
  else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});