ember-blanc-slider v1.0.0-beta-2.1

ember-blanc-slider

Accessible simple content slider

Compatibility

• Ember.js v2.18 or above
• Ember CLI v2.13 or above

Installation

ember install ember-blanc-slider

Usage

{{#blanc-slider as |content|}}
    {{#content.list}}
        {{#content.slide}}
            Slide one and some content
        {{/content.slide}}
        {{#content.slide}}
            Another one (Dj Khaled)
        {{/content.slide}}
    {{/content.list}}
    <button onclick={{action content.previous}} type="button">
        Previous
    </button>
    <button onclick={{action content.next}} type="button">
        Next
    </button>
{{/blanc-slider}}

Available options

• use - type of animation, at this moment only fade or fadeSlide. Defaults to fade. In the future it should be possible to add custom animations.
• auto - Defaults to false, this will auto play the slider

next

Navigate to the next slide

{{content.next}}

previous

Navigate to the previous slide

{{content.previous}}

play

Will auto play the slides

{{content.play}}

stop

Will stop the auto play

{{content.stop}}

autoPlayActive

Returns boolean, will be true when auto play

{{content.autoPlayActive}}

navigation

Will show the navigation

This will give you the default navigation items

{{content.navigation}}

You can wrap a custom element and use the following properties to control it: item, slideAction, 'isActive', index

{{#content.navigation as |nav|}}
  <span
    onclick={{action nav.slideAction nav.index}}
    aria-atomic={{if nav.isActive "true" "false"}}
    role="button"
  >
      {{nav.index}}
  </span>
{{/content.navigation}}

You can pass a component name in the customNavigationComponent param. The following params will automatically passed in and can be used in the component to control the navigation: item, slideAction, 'isActive', index

{{content.navigation
  customNavigationComponent="custom-navigate"
}}

custom-navigate.hbs

<span
  onclick={{action slideAction index}}
  aria-atomic={{if isActive "true" "false"}}
  role="button"
>
    name-{{index}}
</span>

License

This project is licensed under the MIT License.