我无法在流星中实现适当的bootstrap轮播

时间:2016-04-12 13:13:44

标签: javascript twitter-bootstrap meteor

我正在创建一个基于流星的应用程序,我想在其中添加一个bootstrap轮播。我只添加了twitter-bootstrap包。And these are the errors in the console请帮我解决这个问题。这是我的HTML代码:

<template name="images">
<div class="row">
<div class="col-md-6">
  <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>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      <li data-target="#carousel-example-generic" data-slide-to="4"></li>
      <li data-target="#carousel-example-generic" data-slide-to="5"></li>
      <li data-target="#carousel-example-generic" data-slide-to="6"></li>
      <li data-target="#carousel-example-generic" data-slide-to="7"></li>
    </ol>  
   <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      {{#each images}}
        <div class="item {{#if @first}}active{{/if}}">
          <img class="carousel-img" src="{{img_src}}" alt="{{img_alt}}"/> 
          <div class="carousel-caption">
            Image caption
          </div>
        </div> <!-- / carousel item -->
      {{/each}}
    </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>
</div> <!-- / carousel --> 
</div>
</template>

这是我的javascript代码:

Images = new Mongo.Collection("images");

 if (Meteor.isClient) {
    Template.images.helpers({images:Images.find()});
 }
if (Meteor.isServer) {
  Meteor.startup(function () {
  // code to run on server at startup
   if (Images.find().count() == 0){
    for (i=1; i<8; i++){
        Images.insert({
            img_src:"img_"+i+".jpg",
            img_alt:"img"+1
        });
    }
  console.log("startup code says"+Images.find().count());
  }
  });
 }

0 个答案:

没有答案