Using Slick Carousel in Ember application
Tags: ember, frontend
Published: 2020-06-11 18:00:50

---
title: Using Slick Carousel in Ember application
published: true
description: 
tags: Emberjs, frontend
cover_image: https://images.unsplash.com/photo-1545510131-4430b4f790c6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80
---

I want to create good looking applications, so today I decided to implement a carousel into an application I'm working on, and so I went and looked on [http://kenwheeler.github.io/slick/](http://kenwheeler.github.io/slick/). 

### Slick Carousel

Slick is a brilliant carousel that has many options to customise the carousel to your needs, autoplay, arrows, dots, responsiveness and more. I did try to use *ember-cli-slick* package, however, the responsive feature didn't work and so I decided to use the cdn link and do it the old fashioned way.

### Step 1

Add this script onto your index.html, just before the closing body tag. This will allow you to use slick carousel.

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

### Step 2

Implement jquery onto your application so that you can grab the element on the screen. 

[@ember/jquery](https://www.npmjs.com/package/@ember/jquery)

Also install @ember/render-modifers so that you can access certain lifehooks such as *did-insert.*

[emberjs/ember-render-modifiers](https://github.com/emberjs/ember-render-modifiers)

### Step 3

Add a div for the carousel and your item that you want to display. 

```html
<div class="projects-grid" {{did-insert this.renderCarousel}}>
        <div class="carousel">
            {{#each projects as |project| }}
                <div class="item">
                    <div class="project-background" style="background-image: url('{{project.attributes.image-url}}')">
                        <div class="overlay">
                            <div class="project-title">
                                <h4>{{project.attributes.name}}</h4>
                            </div>
                            {{!-- Button to link to specific project --}}
                            <div class="projects-btn">
                                <a href="/projects/{{project.id}}" class="button-link">More Info</a>
                            </div>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
```

### Step 4

Create the method inside of your component class to render the carousel.

```jsx
renderCarousel() {
      $('.carousel').slick({
        adaptiveHeight: true,
        autoplay: false,
        dots: true,
        mobileFirst: true,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
          // You can unslick at a given breakpoint now by adding:
          // settings: "unslick"
          // instead of a settings object
        ]
      });
    }
```

I've added breakpoints onto this so that it will look better on larger devices. You can find all of the settings on the slick website. 

If you encounter any problems, please make sure to drop me a comment.

Happy coding.