无法让旋转木马滑块与流星一起工作
Can't get carousel slider to work with meteor
我想在我用 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
});
}
}
现在已经解决了。问题是我使用的是 CSS ID-s 而不是 类.
您写错了 css class 列。应该是
div class="col-md-1"
而不是
div class="cold-md-1"
我想在我用 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
});
}
}
现在已经解决了。问题是我使用的是 CSS ID-s 而不是 类.
您写错了 css class 列。应该是
div class="col-md-1"
而不是
div class="cold-md-1"