Simple Ember CLI Carousel

1.0.4 · abandoned · verified Wed Apr 22

Ember-cli-carousel is an Ember CLI addon that provided a basic, block-based carousel component for Ember applications. Its last stable release, version 1.0.4, was published in 2016. The package has not received updates or active maintenance for many years, rendering it incompatible with modern Ember.js and Ember CLI versions (which are now in their 4.x and 5.x series). Due to its age and lack of maintenance, it is considered abandoned and should not be used in new projects. At the time of its release, it offered a straightforward way to embed image carousels directly into Ember Handlebars templates, configurable with basic properties like `timeInterval` and `reverse`. Developers seeking carousel functionality in contemporary Ember applications should explore actively maintained alternatives that support current Ember ecosystem standards and practices.

Common errors

```
Cannot read properties of undefined (reading 'extend') or Ember.Component is undefined
```
cause The addon is trying to extend from `Ember.Component` or other core Ember objects which have changed their location or API shape significantly in newer Ember.js versions, typically starting from Ember 3.x or with Octane edition.

fix This addon is incompatible with your Ember.js version. Upgrade to a modern carousel solution. There is no simple fix for this addon itself.
```
Addon could not be found or blueprint failed: 'ember-cli-carousel'
```
cause Attempting to install or use an addon that is too old for the current `ember-cli` version, or its blueprint is incompatible.

fix Ensure your `ember-cli` version is compatible with the addon (which for this package means `ember-cli <= 2.x`). More practically, consider using a different, maintained carousel addon or implement a custom solution.

Warnings

breaking This addon is incompatible with modern Ember.js (versions 3.x and above) and Ember CLI. It was last updated in 2016 and relies on older Ember APIs and build processes which have since been deprecated or removed.
Fix: Migrate to a modern, actively maintained carousel addon or library (e.g., `ember-cli-slick`, `ember-carousel`, or a framework-agnostic solution like Swiper.js, Embla Carousel) that supports your current Ember version.
deprecated The underlying Ember APIs and component patterns used by `ember-cli-carousel` are likely deprecated in newer Ember versions. Using this addon will introduce deprecation warnings and potential runtime errors.
Fix: Avoid using this addon. The cost of patching it for modern Ember is likely higher than migrating to a contemporary solution.
gotcha As an unmaintained addon, `ember-cli-carousel` may contain security vulnerabilities (CVEs) that will not be patched. Using it in production could expose your application to security risks.
Fix: Do not use this addon in any production environment. Always prioritize actively maintained packages for critical functionalities.
gotcha This addon may not adhere to modern Ember conventions, such as Glimmer components, accessibility best practices, or bundle size optimizations, leading to a poorer user experience and harder maintenance.
Fix: Choose carousel solutions designed for modern web development, focusing on accessibility, performance, and maintainability.

Install

npm install ember-cli-carousel npm
yarn add ember-cli-carousel yarn
pnpm add ember-cli-carousel pnpm

Imports

ember-cli-carousel
```
{{#ember-cli-carousel timeInterval=3000 reverse=false}}
  {{!-- carousel items --}}
{{/ember-cli-carousel}}
```
Ember CLI addons are typically consumed as Handlebars components within `.hbs` template files. There is no direct JavaScript `import` statement for the component itself when used in a template. The addon registers these components for use in templates.
ember-cli-carousel-item
```
{{#ember-cli-carousel-item}}
  <img src="/path/to/image.jpg">
{{/ember-cli-carousel-item}}
```
This is a sub-component (or yielded component) used within the `ember-cli-carousel` block to define individual slides. Like the parent, it's used directly in Handlebars templates.

Quickstart

Demonstrates the basic usage of the `ember-cli-carousel` component in an Ember Handlebars template, showing how to define carousel items with images and custom content. It also includes the installation command.

<!-- app/templates/application.hbs or any component/route template -->
<div class="my-app-carousel">
  {{#ember-cli-carousel timeInterval=5000 reverse=false as |carousel|}}
    {{#carousel.item}}
      <img src="https://example.com/images/slide1.jpg" alt="First slide image">
      <p>This is the first captivating slide.</p>
    {{/carousel.item}}
    {{#carousel.item}}
      <img src="https://example.com/images/slide2.jpg" alt="Second slide image">
      <p>Here's some content for the second slide.</p>
    {{/carousel.item}}
    {{#carousel.item}}
      <img src="https://example.com/images/slide3.jpg" alt="Third slide image">
      <p>And finally, the third slide with more details.</p>
    {{/carousel.item}}
  {{/ember-cli-carousel}}
</div>

// For installation, run in your Ember CLI project directory:
// ember install ember-cli-carousel

view raw JSON →