Carousel

Accessibility

The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.

Image sizes

A bootstrap grid can go as wide as 1170px.

Swipe

On many occasions you will want to add Swipe support to the bootstrap carousel.

This can be easily achieved by adding the JQuery Mobile touch events as below to your backbone view.

events :
    "swiperight #carouselID" : "swipeRight"
    "swipeleft  #carouselID" : "swipeLeft"

Create the methods to handle the swipe events

swipeRight : ( event ) ->
    $( event.currentTarget ).carousel "prev"

swipeLeft : ( event ) ->
    $( event.currentTarget ).carousel "next"

Default

= codeBlender "carousel", "molecule",
  { array: [ { image: { data: { text: "yes" }, itemClass: "test", extraClass: "img-responsive", src: lorem.image( '820x400', :random_color => true, text: 'Carousel 1' ) } },
             { image: { extraClass: "img-responsive", src: lorem.image( '820x400', :random_color => true, text: 'Carousel 2' ) } } ],
    data:  { ride: "carousel", interval: "3000" }, control: true, indicator: true, id: "carousel1" }

<div class='carousel carousel1 slide' data-interval='3000' data-ride='carousel' id='carousel1'>
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='.carousel1'></li>
<li data-slide-to='1' data-target='.carousel1'></li>
</ol>
<div class='carousel-inner' role='listbox'>
<div class='active item test' data-text='yes' ng-swipe-left='root.carouselSwipeNext( $event )' ng-swipe-right='root.carouselSwipePrev( $event )'>
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://placehold.it/820x400/7ec53a/91ebc0&amp;text=Carousel+1" alt="Carousel 0" class="image__img img-responsive" data-text="yes" itemprop="contentUrl" />
</figure>

</div>
<div class='item' ng-swipe-left='root.carouselSwipeNext( $event )' ng-swipe-right='root.carouselSwipePrev( $event )'>
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://placehold.it/820x400/c769ab/30864f&amp;text=Carousel+2" alt="Carousel 1" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</div>
</div>
<a href=".carousel1" class="carousel-control left" data-slide="prev" role="button" ng-click="root.carouselPrev( $event )"><span aria-hidden='true' class='glyphicon glyphicon-chevron-left'></span>
<span class='sr-only'>Previous</span>
</a><a href=".carousel1" class="carousel-control right" data-slide="next" role="button" ng-click="root.carouselNext( $event )"><span aria-hidden='true' class='glyphicon glyphicon-chevron-right'></span>
<span class='sr-only'>Next</span>
</a></div>

Caption, no controls

= codeBlender "carousel", "molecule",
  { array: [ { image: { carouselCaption: { body: "Caption body", text: "Caption title" }, extraClass: "img-responsive", src: lorem.image( '820x400', :random_color => true, text: 'Carousel 1' ) } } ],
    data:  { ride: "carousel", interval: "3000" }, indicator: true, id: "carousel2" }

<div class='carousel carousel2 slide' data-interval='3000' data-ride='carousel' id='carousel2'>
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='.carousel2'></li>
</ol>
<div class='carousel-inner' role='listbox'>
<div class='active false item' ng-swipe-left='root.carouselSwipeNext( $event )' ng-swipe-right='root.carouselSwipePrev( $event )'>
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://placehold.it/820x400/301ec2/3a476b&amp;text=Carousel+1" alt="Carousel 0" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

<div class='carousel-caption'>
<h3 class='heading'>
Caption title
</h3>


<p>Caption body</p>
</div>
</div>
</div>
</div>

No indicators or controls

= codeBlender "carousel", "molecule",
  { array: [ { image: { extraClass: "img-responsive", src: lorem.image( '820x400', :random_color => true, text: 'Carousel 1' ) } },
             { image: { extraClass: "img-responsive", src: lorem.image( '820x400', :random_color => true, text: 'Carousel 2' ) } } ],
    data:  { ride: "carousel", interval: "3000" }, id: "carousel3" }

<div class='carousel carousel3 slide' data-interval='3000' data-ride='carousel' id='carousel3'>
<div class='carousel-inner' role='listbox'>
<div class='active false item' ng-swipe-left='root.carouselSwipeNext( $event )' ng-swipe-right='root.carouselSwipePrev( $event )'>
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://placehold.it/820x400/48635f/ce279a&amp;text=Carousel+1" alt="Carousel 0" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</div>
<div class='item' ng-swipe-left='root.carouselSwipeNext( $event )' ng-swipe-right='root.carouselSwipePrev( $event )'>
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://placehold.it/820x400/ca4920/3761be&amp;text=Carousel+2" alt="Carousel 1" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</div>
</div>
</div>

Just a caption

= codeBlender "carousel", "molecule",
  { array: [ { image: { carouselCaption: { tag: "h1", body: "Caption body 1", text: "Caption title 1" } } },
             { image: { carouselCaption: { body: "Caption body 2", text: "Caption title 2" } } } ],
    data:  { ride: "carousel", interval: "5000" }, id: "carousel__captionOnly" }

<div class='carousel carousel__captionOnly slide' data-interval='5000' data-ride='carousel' id='carousel__captionOnly'>
<div class='carousel-inner' role='listbox'>
<div class='active false item' ng-swipe-left='root.carouselSwipeNext( $event )' ng-swipe-right='root.carouselSwipePrev( $event )'>
<div class='carousel-caption'>
<h1 class='heading'>
Caption title 1
</h1>


<p>Caption body 1</p>
</div>
</div>
<div class='item' ng-swipe-left='root.carouselSwipeNext( $event )' ng-swipe-right='root.carouselSwipePrev( $event )'>
<div class='carousel-caption'>
<h3 class='heading'>
Caption title 2
</h3>


<p>Caption body 2</p>
</div>
</div>
</div>
</div>

Resources Useful websites and tutorials

Title	URL
Bootstrap carousel	http://getbootstrap.com/javascript/#carousel
Swipe Support	http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

Tasks

Task	Date
Need to find a way to work with both ImageArray and a more content focussed array
Should pass direct arrays for image and heading to the carousel
Heading for caption should use partial
Caption should be more flexible, maybe pull from partials also

Code Blender

An atomic Middleman partials library