Bootstrap 流星旋转木马

Question

我的代码有问题。我是学习 Meteor 的新手。我已经好几个小时都无法修复它了。我在我的练习站点中加入了一个旋转木马，但它没有按照预期的方式工作，所有的图片都只是出现。我从 bootstrap 的网站复制粘贴轮播模板并将其存储在模板标签中。

<template name="Carousel">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

  
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="/images/1.png" alt="">
  </div>
  <div class="item active">
    <img src="/images/2.png" alt="">
  </div>
  <div class="item active">
    <img src="/images/3.jpg" alt="">
  </div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>
  </div>
</template>

这是我的主页布局，我将其称为轮播模板

<template name="HomeLayout">
    {{> yield "Navigation"}}
    {{> yield "Carousel"}}  
</template>

这是我的路线

Router.route('/', function () {
  this.layout('HomeLayout');
  this.render('Navigation', {to: 'Navigation'});
  this.render('Carousel', {to: 'Carousel'});
});

此外，关于 Meteor 中页面路由的正确编码，我还能得到 tips/feedback 吗？

非常感谢您的帮助。非常感谢。

Answer 1

最后，几分钟后，我发现了错误。我不小心在每个项目中添加了 'active' class。我不知道该笑还是该哭。 xD 也许我只是需要睡一觉。

Bootstrap 流星旋转木马

Bootstrap Carousel with Meteor

meteor

meteor-blaze