Bootstrap carousel that can lazy-load it's images.
MIT License
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/.
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 nestedtwbs-carousel
.twbs-carousel/slide/img
- a component generating an html <img>
tagThe following mixin also ships with this addon:
Carousel
- imported as import Carousel as 'ember-cli-bootstrap3-carousel/mixins/carousel'
and includes allFurther information about these items can be found in the Usage section below.
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
invoking the 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/
{{twbs-carousel}}
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.
Carousel
mixin.onSlide
- the property that accepts an action closure hooked to the bootstrap slide.bs.carousel
event.onSlid
- the property that accepts an action closure hooked to the bootstrap slid.bs.carousel
event.{{twbs-carousel/slide}}
{{twbs-carousel/slide/img}}
Carousel
A mixin that provides access to all of the Bootstrap carousel options as found here: http://getbootstrap.com/javascript/#carousel-options
interval
- Default 5000
keyboard?
(aliased to keyboard
) - Default true
pause
- Default "hover"
wrap?
(aliased to wrap
) - Default true
computedOptions()
- returns a hash containing the options from this mixingit clone [email protected]:cybertoothca/ember-cli-bootstrap3-carousel.git
npm install
bower install
ember server
npm test
(Runs ember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit http://ember-cli.com/.
npm link
command to link this addon within your localnpm link ember-cli-bootstrap3-carousel
.package.json
and add the ember addon with the version *. It will"ember-cli-bootstrap3-carousel": "*"
. Nownpm install
on this other project itnpm uninstall -g ember-cli-bootstrap3-carousel
ember-cli-bootstrap3-carousel
package.json
.npm prune
and bower prune
from the root of your other project's command line.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/