Slick

Slick smart package for Meteor.

Some features, as listed on the demo page:

Fully responsive. Scales with its container
Separate settings per breakpoint
Uses CSS3 when available. Fully functional when not
Swipe enabled. Or disabled, if you prefer
Desktop mouse dragging
Infinite looping
Fully accessible with arrow key navigation
Add, remove, filter & unfilter slides
Autoplay, dots, arrows, callbacks, etc...

See demo page and github project page of the original Slick package for usage description and examples.

#Install

meteor add udondan:slick

#Minimal example

<head>
  <title>Slick example</title>
</head>

<body>
  {{> carousel}}
</body>

<template name="carousel">  
  <div id="carousel">
    <div><img src="https://raw.githubusercontent.com/kenwheeler/slick/master/img/slick.gif" width="200px" /></div>
    <div><img src="https://raw.githubusercontent.com/kenwheeler/slick/master/img/slick.gif" width="200px" /></div>
    <div><img src="https://raw.githubusercontent.com/kenwheeler/slick/master/img/slick.gif" width="200px" /></div>
  </div>
</template>

#carousel {
  border:   1px solid black;
  width:    200px;
  position: relative;
  top:      100px;
  left:     100px;
}

#carousel div {
  width:    200px;
}

.slick-prev:before, .slick-next:before {
  color:    silver;
}

if (Meteor.isClient) {
  Template.carousel.rendered = function() {
    $('#carousel').slick({
      dots: true,
      arrows: true
    });
  }
}

#License MIT, as the original Slick package

simonengelhardt/meteor-slick

Slick