• Download

Class

Element

Fx

User Interface

Utilities

Widgets

 

Class: Fx.Scroll.Carousel {#Fx.Scroll.Carousel}

Extends Fx.Scroll to provide carousel functionality.

Extends:

Fx.Scroll

Demo:

Fx.Scroll.Carousel Method: constructor {#Fx.Scroll.Carousel:constructor}

Syntax:

var myCarousel = new Fx.Scroll.Carousel(element, options);

Arguments:

1. element - (mixed) A string of the id for an Element or an Element reference to scroll.
2. options - (object, optional) All of the Fx.Scroll options plus the options below:

Options:

• mode - (string: defaults to horizontal) Accepts horizontal and vertical.
• childSelector - (string: defaults to false) This can be used if your elements inside the carousel don't match the default element selection*.
• loopOnScrollEnd - (boolean: defaulst to true) If true, the carousel will scroll to the beginning when the last element is visible. If false it will try to scroll to each element displaying no effect for the last few elements (usually.)

Notes:

If the mode is vertical it will select the immediate children of your element. If the mode is horizontal it will select the grandchildren of your scrolling element since you typically need a wrapper and an inner div to achieve a horizontal scroll, and if childSelector is defined it will selected whatever elements match. Here are some examples:

#HTML
<!-- horizontal mode selects grandchildren -->
<div id="horizontally-scrolling-element">
  <div id="forced-horizontal-scroll-element" style="width: 2000px">
    <div class="horizontally-selected-element">1</div>
    <div class="horizontally-selected-element">2</div>
    <div class="horizontally-selected-element">3</div>
    <div class="horizontally-selected-element">4</div>
  </div>
</div>

<!-- vertical mode selects children -->    
<div id="vertically-scrolling-element">
  <div class="vertically-selected-element">1</div>
  <div class="vertically-selected-element">2</div>
  <div class="vertically-selected-element">3</div>
  <div class="vertically-selected-element">4</div>
</div>

<!-- childSelecter: 'p' selects 'p' -->
<div id="overflowed-element">
  <div>
    <div>
      <p class="childSelector-ed">1</p>
      <p class="childSelector-ed">2</p>
      <p class="childSelector-ed">3</p>
      <p class="childSelector-ed">4</p>
    </div>
  </div>
</div>

Example

#HTML
<div id="carousel">
  <div class="inner" style="width: 2000px">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

#CSS
div#carousel {
  overflow: hidden;
  width: 300px;
  height: 200px;
}

div#carousel div.inner {
  width: 600px;
}

div#carousel div.inner > div {
  float: left;
  width: 100px;
  height: 200px;
}

#JS
myCarousel = new Fx.Scroll.Carousel('carousel',{
  mode: 'horizontal',
  onStart: function(){
    myCarousel.getCurrent().tween('color','#000');
  },
  onComplete: function(){
    myCarousel.getCurrent().tween('color','#fff');
  }
});

Fx.Scroll.Carousel Method: toNext {#Fx.Scroll.Carousel:toNext}

Scrolls the carousel to the next element

Syntax:

myCarousel.toNext();

Returns:

This Fx.Scroll.Carousel instance.

Fx.Scroll.Carousel Method: toPrevious {#Fx.Scroll.Carousel:toPrevious}

Scrolls the carousel to the previous element

Syntax:

myCarousel.toPrevious();

Returns:

This Fx.Scroll.Carousel instance.

Fx.Scroll.Carousel Method: getCurrent {#Fx.Scroll.Carousel:getCurrent}

Returns an element reference of the current element. Helpful when using events.

Syntax:

myCarousel.getCurrent();

Returns:

The current element in the carousel.

Fx.Scroll.Carousel Method: cacheElements {#Fx.Scroll.Carousel:cacheElements}

Not typically used. This caches the elements within carousel. Use this method if you dynamically add items to the carousel

Syntax:

myCarousel.cacheElements();

Returns:

This Fx.Scroll.Carousel instance.