How do I get thumbnails to work with the ember-carousel component?

I just installed the ember-carousel component and am using it to replace my pre-Ember js image carousel set-up that was not working well with Ember (just recently began using Ember).

http://ift.tt/1W7c1PD

http://ift.tt/1peFOMe

So I have this code in my Handlebars templates and it works well to display all the images in a carousel:

index.hbs:

{{#carousel-container transition-interval=400}}
    {{#carousel-body}}
        {{#each model as |rentalUnit|}}
            {{rental-listing rental=rentalUnit}}
        {{/each}}
    {{/carousel-body}}

    {{#carousel-arrow direction="left" tagName="button"}}
        Slide Left
    {{/carousel-arrow}}
    {{#carousel-arrow direction="right" tagName="button"}}
        Slide Right
    {{/carousel-arrow}}
{{/carousel-container}}

rental-listing.hbs:

{{#carousel-item}}
  <img src={{rental.image}} alt={{rental.caption}} width="500px" />
{{/carousel-item}}

The carousel just has slide left/slide right buttons to browse the images. I want to also have thumbnails so you can click on a thumbnail and the carousel will display the corresponding image.

I already have the layout set up with thumbnails, I just don't know how to create this click function. Normally I would do this using jQuery and data attributes on the thumbnails to switch the currently displayed image, I'm just not sure how to create such a click function for thumbnails in this ember-carousel/handlebars template. (I'm very new to Ember/handlebars & would appreciate any help to point me in the right direction.) I'm guessing I would need to add some custom js code to carousel-container.js?: http://ift.tt/1W7c3Hg