无法使用旋转木马滑块与流星一起工作

Question

我想在我使用Meteor创建的投资组合页面上实现轮播滑块库。

问题是我只能在一个画廊工作，但第二个画廊没有正确加载，只是列出了图片。

图片中的问题

我的代码在这里：

#carousel {
  border:   1px solid black;
  width:    200px;
  position: relaitve;
  top:      100px;
  left:     100px;
}

#carousel div {
  width:    200px;
}

.slick-prev:before, .slick-next:before {
  color:    silver;
}


<template name="portfolio">
  <div class="container">
    <div class="row">
      <div class="cold-md-1">
        <div id="carousel">
          <div><img src="http://heidipahn.edicy.co/photos/jaanikapirjophotography_large.jpg" width="200px" /></div>
          <div><img src="http://heidipahn.edicy.co/photos/GreteKlein_large.jpg" width="200px" /></div>
          <div><img src="http://heidipahn.edicy.co/photos/spring_banquet_by_heidishvili-d572cf0_large.jpg" width="200px" /></div>
          <div><img src="http://heidipahn.edicy.co/photos/dawning_by_heidishvili-d368ld9_large.jpg" width="200px" /></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cold-md-1">
        <div id="carousel">
          <div><img src="http://heidipahn.edicy.co/photos/jaanikapirjophotography_large.jpg" width="200px" /></div>
          <div><img src="http://heidipahn.edicy.co/photos/GreteKlein_large.jpg" width="200px" /></div>
          <div><img src="http://heidipahn.edicy.co/photos/spring_banquet_by_heidishvili-d572cf0_large.jpg" width="200px" /></div>
          <div><img src="http://heidipahn.edicy.co/photos/dawning_by_heidishvili-d368ld9_large.jpg" width="200px" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

if (Meteor.isClient) {
  Template.portfolio.rendered = function() {
    $('#carousel').slick({
      dots: true,
      arrows: true
    });
  }
}

Answer 1

现在解决了。问题是我使用的是CSS ID-s而不是类。

Answer 2

您为列编写了错误的css类。它应该是

  

div class =＆＃34; col-md-1＆＃34;

而不是

  

div class =＆＃34; cold-md-1＆＃34;