A simple slick carousel in Ember

There are a lot of different slider and carousel options. If you use a frontend framework like Bootstrap or Foundation, you'll see some native solutions. Plenty of libraries and addons as well: Owl Carousel, Ember Carousel, etc.

We will be using the multi-purpose Slick Slider


This is relatively the simplest step here. However, the main gotcha was where the script tag was placed. It had to be at the very bottom before the closing <body> tag. If you have multiple vendor scripts then the order is relevant in how it all loads. In Ember, it should be placed below your rootURL and vendor assets.

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js">

Now you can create a basic ember component that you can add the slider in any of your templates.


import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    return this.$('.fade').slick({
      accessibility: true,
      adaptiveHeight: true,
      autoplay: false,
      dots: true,
      infinite: true,
      speed: 500,
      fade: true,
      cssEase: 'linear',

You can check out the Slick documentation for other variables and settings like arrows, asNavFor, prevArrow, nextArrow, centerMode, lazyload, easing, mobileFirst, rows, slidesPerRow, etc.


.fade {
  color: white;
  width: auto;
  margin: 30px 50px 50px;

  .slick-slide {
    text-align: center;
    font-size: 20px;

  img {
    margin: auto;
    height: 80vh;
    display: flex;
    background-size: cover;

  .box {
    h1 {
      margin-top: 9.5%
    p {
      margin-top: 10%;
      justify-content: left;

  .slider_content {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff;
    color: black;
    width: 55%;
    padding-left: 2rem;
    padding-right: 2rem;
    height: 22.5vh;
    display: flex;
    justify-content: center;

  .slick-next:before {
      color: black;
      font-style: 30px;

  .slick-dots {
    bottom: -30px;

And that's it. You now have a slick carousel in Ember.js.