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

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 class 列。应该是

div class="col-md-1"

而不是

div class="cold-md-1"

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

Can't get carousel slider to work with meteor

css

meteor

carousel