Advanced

Basic

Carousel

Description

The carousel is a widget that allows horizontal scrolling (with touch or buttons) between a set of items.

The CSS we need to use here is pretty picky, so make sure to check out the CSS tab below.

The compatibility of this with FireFox is adequate (vertical-scroll: enabled is not supported however). Check out our compatibility tables to see which devices and browsers will display the carousel.

Attributes

data-ur-carousel-component="item": wrap each scrollable item in this
data-ur-carousel-component="button": for the previous and next buttons
data-ur-carousel-button-type="prev"/"next": to distinguish the previous and next buttons
data-ur-carousel-component="view_container": for wrapping the whole view container
data-ur-carousel-component="scroll_container": for wrapping the whole scrolling container
data-ur-set="carousel": add this attribute to a div that wraps the whole widget

data-ur-set=

"carousel"

data-ur-carousel-component=

Optional

"button"

indicates the previous and next buttons
multiple?: true
state: enabled / disabled ('next' defaults to enabled / 'prev' defaults to 'disabled')
attributes
- required: data-ur-carousel-button-type:"next"/"prev" for the next and previous buttons, respectively

"dots"

gives a container that changes data-ur-state on the corresponding child
multiple?: false
state: N/A

"count"

gives an indicator of the position of the carousel, in the form "1 of 8", etc.
multiple?: false
state: N/A

Required

"view_container"

this div should wrap the whole carousel; it must be set to no overflow. It or the scroll_container needs position:relative.
multiple?: false
state: N/A
attributes
- optional: data-ur-touch: enabled/disabled
- optional: data-ur-vertical-scroll: enabled/disabled (specify vertical scrolling behavior while touching carousel)
- optional: data-ur-maps: enabled/disabled (allow images using maps in carousel)
- optional: data-ur-infinite: enabled/disabled (specify front to back wrapping behavior)
- optional: data-ur-autoscroll: enabled/disabled (automatically scroll with interval)
- optional: data-ur-autoscroll-delay: integer (autoscroll delay in seconds)
- optional: data-ur-autoscroll-dir: next/prev (specify autoscroll direction)
- optional: data-ur-android3d: enabled/disabled (specify translate3d use on Android 1.6-2.3)
- optional: data-ur-fill (β): integer (force n carousel items to fit in container width)
- optional: data-ur-center (β): enabled/disabled (horizontally center current item)

"scroll_container"

this div should wrap the scrolling items on the carousel. It or the view_container needs position:relative.
multiple?: false
state: N/A

"item"

this attribute is for each item that needs to be displayed in the carousel
multiple?: true
state: active / inactive (reflects currently visible item)
must have float:left style

Instance

Access the widget via: Ur.Widgets.carousel["ID"]. The following methods are exposed for each widget:

"slideend": event is fired on view_container when sliding ends
"slidestart": event is fired on view_container when sliding begins (excluding touch input)
jumpToIndex(index): forces the carousel to jump to the specified (zero based) index
onSlideCallbacks(callback): supplies a callback which is called when animation has completed

Demonstration

Touch-enabled Widget

Widget

HTML

CSS

-- count --

<div data-ur-set="carousel" data-ur-carousel-component="view_container" data-ur-id="MyFirstCarousel">
  <span data-ur-carousel-component="count"> -- count -- </span>
  <div data-ur-carousel-component="button" data-ur-carousel-button-type="prev">Prev</div>
  <div data-ur-carousel-component="button" data-ur-carousel-button-type="next">Next</div>
  <div data-ur-carousel-component='scroll_container'>
    <img data-ur-carousel-component='item' src='images/sample1.png' alt="1" />
    <img data-ur-carousel-component='item' src='images/sample2.png' alt="2" />
    <img data-ur-carousel-component='item' src='images/sample3.png' alt="3" />
    <img data-ur-carousel-component='item' src='images/sample4.png' alt="4" />
    <img data-ur-carousel-component='item' src='images/sample5.png' alt="5" />
    <img data-ur-carousel-component='item' src='images/sample6.png' alt="6" />
    <img data-ur-carousel-component='item' src='images/sample7.png' alt="7" />
    <img data-ur-carousel-component='item' src='images/sample8.png' alt="8" />
  </div>
</div>

div[data-ur-carousel-component="view_container"] {
  width: 100%;
  overflow-x: hidden;
}
div[data-ur-carousel-component="scroll_container"] > * {
  display: inline-block;
  float: left;
}
div[data-ur-carousel-component="button"][data-ur-state="disabled"] {
  opacity: 0.3;
}

More examples of the carousel can be found here, including:

vertical scrolling
infinite scrolling
autoscroll
a "jump to" function

Carousel Examples

Vertical Scrolling

This carousel doesn't allow vertical scrolling on touch screens.

data-ur-vertical-scroll="disabled" - apply this to the view container

-- count --

Infinite scrolling example

Here we have a carousel that loops from front to back.

-- count --

Slideshow example

Here we have a carousel that scrolls every five seconds with a "dot" indicator. Note that the current element is centered.

-- count --

"Jump to..." function

In this example, we have a bit of extra javascript to include in the page. We use this to jump to a location in the carousel. It's what we call an "instance" - only for this instance of the carousel will the feature be enabled.

<script type="text/javascript">
  x$("[data-ur-carousel-component='item']").click(function(e) {
    console.log("You clicked:", e.target.src);
  });
  x$("#jump").click(function() {
    Ur.Widgets["carousel"]["MyFirstCarousel"].jump_to_index(4);
  });
</script>

Jump to 5th item

-- count --