Problem with using slick inside Meteor JS Project

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


	     <h1>Welcome to Meteor!</h1>		
	{{> hello}}
	<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>


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


	if (Meteor.isClient) {
		alert("Inside onRendered");
		infinite: false,
		dots: true,
		slidesToShow: 3,
		slidesToScroll: 3,
		arrows: true

Please help me out of this issue

1 Like