Bootstrap 4 使用CodePen而不是JSFIDLE的MultiItemCarousel

您好，我正在创建一个带有无限循环的多项目旋转木马。我见过在Codepen上编码的代码，但当我在我的工作和JSFIDLE中尝试时，似乎没有在Codepen上得到结果。我的目标就像代码笔显示的结果，但我在工作中得到的结果是在JSFIDLE上得到的结果。我想寻求建议，究竟出了什么问题，为什么在JSFIDLE上没有得到结果

使用引导的旋转木马可以在每张幻灯片上显示多个项目。
//实例化引导转盘
$（'.multi-item carousel'）。carousel({
间隔：假
});
//对于旋转木马中的每张幻灯片，复制幻灯片中下一张幻灯片的项目。
//对下一个，下一个项目也这样做。
$（'.multi-item carousel.item'）。每个（函数（）{
var next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
if（next.next（）.length>0）{
next.next（）.children（':first child'）.clone（）.appendTo（$（this））；
}否则{
$（this）.兄弟姐妹（':first'）.children（':first child'）.clone（）.appendTo（$（this））；
}
});
.多项目传送带{
.旋转木马内部{
>.项目{
过渡：500毫秒，从左向外缓进；
}
.主动{
&.左{
左-33%；
}
&.对{
左：33%；
}
}
.下一个{
左：33%；
}
上一篇{
左-33%；
}
@媒体和全部（transform-3d），（-webkit-transform-3d）{
>.项目{
//在这里使用您最喜欢的前缀
过渡：500毫秒，从左向外缓进；
过渡：500ms缓进缓出；
背面可见性：可见；
转变：无！重要；
}
}
}
.旋转木马控制{
&.左,右,{
背景图像：无；
}
}
}
//非相关样式：
身体{
背景：#333；
颜色：#ddd；
}
h1{
颜色：白色；
字号：2.25em；
文本对齐：居中；
边缘顶部：1米；
边缘底部：2米；
文本阴影：0px2px0pxrgba（0,0,0,1）；
}

我复制粘贴了codepen中的代码，并添加了引导和jquery cdn链接，结果成功了。以下是供您参考的链接。谢谢

---

777

我可以问一下如何作为将来的参考吗对不起，不方便，我自己尝试过，但仍然不起作用，它是bootstrap 4.1.3和jquery 3.3.1吗？您没有添加bootstrap和jquery链接。在JSFIDLE和codepen中添加代码是不一样的。抱歉，错误的链接，这一个我尝试了我们正在使用的引导版本，但它似乎没有显示正确的javascript部分显示了

无库

，而如果您检查我的。它将显示jquery。

  <div class="container">
  <h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
  <div class="row">
    <div class="col-md-12">
      <div class="carousel slide multi-item-carousel" id="theCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>
          <!-- add  more items here -->
          <!-- Example item start:  -->

          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>

          <!--  Example item end -->
        </div>
        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

    // Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-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));
  }
});


    .multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: 500ms ease-in-out left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}

// non-related styling:
body{
  background: #333;
  color: #ddd;
}
h1{
  color: white;
  font-size: 2.25em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}