Using Slick Carousel in Ember application

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/.

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.

<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

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

emberjs/ember-render-modifiers

Step 3

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

<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.

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.

Blog