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

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

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

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

{{#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
});

This widget supports the full range of slick-slider configuration options. The full list with descriptions can be found at the slick-slider homepage.

• accessibility
• adaptiveHeight
• autoplay
• autoplaySpeed
• arrows
• asNavFor
• appendArrows
• appendDots
• prevArrow
• nextArrow
• centerMode
• centerPadding
• cssEase
• customPaging
• dots
• draggable
• fade
• focusOnSelect
• easing
• edgeFriction
• infinite
• initialSlide
• lazyLoad
• mobileFirst
• pauseOnHover
• pauseOnDotsHover
• respondTo
• responsive
• rows
• slide
• slidesPerRow
• slidesToShow
• slidesToScroll
• speed
• swipe
• swipeToSlide
• touchMove
• touchThreshold
• useCss
• variableWidth
• vertical
• verticalSwiping
• rtl

• git clone this repository
• npm install
• bower install

• ember server
• Visit your app at http://localhost:4200.

• ember test
• ember test --server

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.