I am currently working on my portfolio page using Meteor, and I want to include a carousel slider gallery.
The problem I'm facing is that while the first gallery works fine, the second one does not load correctly and just displays a list of pictures.
Here's an illustration of the issue
Below is a snippet of my code:
#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
});
}
}