@surkus/ember-cli-slick NPM

@surkus/ember-cli-slick

@surkus/ember-cli-slick is a component that wraps the Slick Slider Jquery plugin functionality for use with Ember CLI.

This was originally written by laantorchaweb and has since been upgraded to work with Ember CLI >= 3.4.

The versioning has changed to correspond to the supported Slick Carousel version. Current version is 1.8.x.

Surkus is a huge proponent of Ember and as such will support maintaining these addons for as long as we use them. Giving confidence to the community that these will be properly updated and maintained over time.

Installation

From inside your ember-cli project, run the following:

ember install @surkus/ember-cli-slick

Add css to your dot sass or scss file.

  @import @surkus/ember-cli-slick/slick
  @import @surkus/ember-cli-slick/slick-theme

slick-slider Component

{{#slick-slider autoplay=true arrows=false}}
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
{{/slick-slider}}

Callbacks

slickInit => init //Changed for the purpose of component
beforeChange
afterChange
breakpoint
edge
reInit
setPosition
swipe
destroy
lazyLoaded
lazyLoadError

{{#slick-slider	afterChange=(action 'someAfterChange')}}
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
{{/slick-slider}}

Init Event

A slickInit event may be bound from your template. This event is triggered after Ember's internal didInsertElement with a DOM reference to the newly created widget allowing direct manipulation of the DOM elements after creation.

{{#slick-slider	slickInit=(action 'someInitAction')}}
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
{{/slick-slider}}

The responsive configuration needs to be passed by a controller property

{{#slick-slider	responsive=breakpoints}}
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
  <div class="box"> <img src="https://picsum.photos/200/300"> </div>
{{/slick-slider}}

import Controller from '@ember/controller';

const breakpoint = [
  {
    'breakpoint': 1024,
    'settings': {
      'slidesToShow': 3,
      'slidesToScroll': 3,
      'infinite': true
    }
  },
  {
    'breakpoint': 600,
    'settings': {
      'slidesToShow': 2,
      'slidesToScroll': 2
    }
  },
  {
    'breakpoint': 480,
    'settings': {
      'slidesToShow': 1,
      'slidesToScroll': 1
    }
  }
]

export default Controller.extend({
  breakpoints
});