This addon can create a basic Bootstrap3 carousel that can lazy-load images. See the Bootstrap3 Carousel documentation for additional information.
The demonstration web application can be found here: http://ember-cli-bootstrap3-carousel.cybertooth.io/.
What Does This Addon Do?
This addon supplies the following components:
twbs-carousel- a container-like element for the carousel's slides.
twbs-carousel/slide- a component representing a slide that is nested inside a
twbs-carousel/slide/img- a component generating an html
<img>tag that has the ability to be lazily loaded by the carousel's slide event.
The following mixin also ships with this addon:
Carousel- imported as
import Carousel as 'ember-cli-bootstrap3-carousel/mixins/carousel'and includes all of the carousel options as found in the Bootstrap documentation.
Further information about these items can be found in the Usage section below.
- Ember >= 2.3.0: This addon uses the hash helper which was introduced in Ember-2.3.0.
- Ember CLI
- You must have Bootstrap 3.x installed in your Ember application. Feel free to use the ember-cli-bootstrap3-sass addon to setup Bootstrap if you haven't already done so.
The following will install this addon:
$ ember install ember-cli-bootstrap3-carousel
As mentioned, you must install Bootstrap3 along with the tooltip plugin. See the requirements section above.
When working through the Ember upgrade process, I recommend
ember install ember-cli-bootstrap3-carousel command once
you are done to get the latest version of the addon.
As mentioned above there are several examples on the demonstration site: http://ember-cli-bootstrap3-carousel.cybertooth.io/
A component that creates the
<div class="carousel> element.
The reason this addon requires Ember-2.3.0+ is because this particular component uses the hash helper.
- All of the properties listed in the
onSlide- the property that accepts an action closure hooked to the bootstrap
onSlid- the property that accepts an action closure hooked to the bootstrap
keyboard) - Default
wrap) - Default
computedOptions()- returns a hash containing the options from this mixin that are used to initialize the Bootstrap popover.
Troubleshooting And Tips
- Ember-2.3.0+ is required because this addon uses the hash helper.
Ember Addon Building And Testing
git clone email@example.com:cybertoothca/ember-cli-bootstrap3-carousel.git
Running The Dummy Application
- Visit your app at http://localhost:4200.
Running Addon Tests
ember try:testallto test your addon against multiple Ember versions)
ember test --server
Building The Addon
For more information on using ember-cli, visit http://ember-cli.com/.
Linking This Addon For Local Testing
- From the command line at the root of this project run the
npm linkcommand to link this addon within your local node repository.
- From the other Ember project that you wish to test this addon
in, execute the following command:
npm link ember-cli-bootstrap3-carousel.
- Now in that same other Ember project, you should go into the
package.jsonand add the ember addon with the version *. It will look something like this:
"ember-cli-bootstrap3-carousel": "*". Now when/if you execute
npm installon this other project it will know to look for the linked addon rather than fetch it from the central repository.
- Remove the addon from your local node repository with the following
command (that can be run anywhere):
npm uninstall -g ember-cli-bootstrap3-carousel
- Remove the reference to the
ember-cli-bootstrap3-carouselin your other project's
- Run an
bower prunefrom the root of your other project's command line.
Deploying The Dummy Application
Make sure your
~/.aws/credentials file has a profile named cybertooth
with a valid key and secret,
[cybertooth] aws_access_key_id = <KEY> aws_secret_access_key = <SECRET>
Deploy by invoking the following command:
ember deploy production
Confirm your changes are showing up in our S3 container: http://ember-cli-bootstrap3-carousel.cybertooth.io/