Question

我正在尝试使用带有多个项目的bootsrapt轮播，因为它已在此Bootply code中展示，但它不适用于角度为2.

我将此轮播整合到我的角度2项目中Plunkr code 这些是我用来获取多项旋转木马的jquery，css和html代码。 ħ

  $('#myCarousel').carousel({
  interval: 4000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    
    next.children(':first-child').clone().appendTo($(this));
  }
});

.carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-control.left,.carousel-control.right {background-image:none;}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular2Restful</title>
  <meta name="description" content="Agile plant disease monitoring">
  <meta name="author" content="APDM">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
      <div class="col-lg-8 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-lg-12 ">
<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-lg-3"><a href="#"><img src="http://placehold.it/500x500" class="img-responsive"></a></div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!--   <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
  <script src="../node_modules/chartjs-plugin-annotation/chartjs-plugin-annotation.min.js"></script>
 -->  <script type="text/javascript" onload>
  $('#myCarousel').carousel({
  interval: 4000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    
    next.children(':first-child').clone().appendTo($(this));
  }
});
</script>
</html>

有没有人知道如何使角度2工作？有一个动画问题。注意：即使它看起来像是在代码片段中工作，我希望您看一下链接并单击右键。我在我的本地项目中得到了同样的效果，我不知道为什么。

Answer 1

您好我使用 ng bootstrap 并使用mat卡创建了一个carousal你可以从github路径下面获取它 Github-angular-carousal

请参阅托管样本here

将靴带转盘与角度为2的多个物品集成在一起

1 个答案: