Problem with using slick inside Meteor JS Project

help
1

Having issue with slick when using with meteor, Arrows and little points on the bottom are appearing as character values ,

i have used risul:slick package. Slick Carousel appear as in the link

Appearance on Slick Carousel

testSlick.html

	<head>
	<title>testSlick</title>
	</head>		
	<body>
	     <h1>Welcome to Meteor!</h1>		
	{{> hello}}
	</body>
	
	<template name="hello">
	    <div id="carousel">
		<div id="demo-box">1</div>
		<div id="demo-box">2</div>
		<div id="demo-box">3</div>
		<div id="demo-box">4</div>
		<div id="demo-box">5</div>
		<div id="demo-box">6</div>
		<div id="demo-box">7</div>
		<div id="demo-box">8</div>
		<div id="demo-box">9</div>
		<div id="demo-box">10</div>
		<div id="demo-box">11</div>
		<div id="demo-box">12</div>
	      </div>		
	</template>

testSlick.css

	#demo-box {
		background: #eeeeee;
		color: #3498db;
		font-size: 36px;
		line-height: 90px;
		margin: 10px;
		padding: 2%;
		position: relative;
		text-align: center;
		width: 145px;
	       }

testSlick.js

	if (Meteor.isClient) {
	Template.hello.onRendered(function()
	{
		alert("Inside onRendered");
		$('#carousel').slick({
		infinite: false,
		dots: true,
		slidesToShow: 3,
		slidesToScroll: 3,
		arrows: true
		});
		
	});
	}

Please help me out of this issue

1 Like