Carousel

Table of Contents

carousel

The carousel component provides a simple list of items which are to be scrolled in a horizontal viewport. The carousel component allows users to scroll left and right using touch gesture. A simple example of its use can be found in the header of ICEmobile MediaCast Demo

This component will load it's own javascript library in the body of the view page only once per each view, as that is necessary in cases where one first starts to use or render a component on a postback.  A javascript library used by this component is the iscroll.js library, which is currently not in minified version for use with IE9. This component has both singleSubmit and <mobi:ajax/> support on the selectedItem attribute

Usage

  • Simple usage:- The carousel component takes a list of items as it's input (UIData) var. Each item in the list will render the contained children similar for each item in the list.
   <mobi:carousel id="carOne" value="#{carousel.imageList}" var="item">
        <h:panelGroup>
            <h:graphicImage value="#{item.imageUrl}"
                            height="#{item.height}"/>
            <span style="#{item.style}">#{item.title}</span>
        </h:panelGroup>
    </mobi:carousel>
  • SingleSubmit and selectedItem :- The carousel component supports singleSubmit such that if an item is scrolled to and scrolling stops, the selected item's index will be sent to the server on an ajax (partial) submit and the page re-rendered based on a new item being selected.
    <mobi:carousel id="carTwo" value="#{carousel.imageList}" var="item" valueChangeListener="#{carousel.changedIndex}"
               selectedItem="#{carousel.selectedIndex}" singleSubmit="true">
         <h:panelGroup id="imgPanel">
             <h:graphicImage id="innerImg" value="#{item.imageUrl}"
                            height="#{item.height}"/>
                          <span id="imgStyle" style="#{item.style}">#{item.title}</span>
         </h:panelGroup>
    </mobi:carousel>
    
  • this component also has <mobi:ajax/> support but this is limited since it is a naming container.

    Theming

Carousel supports device theming by providing default styles for Apple, Android and Blackberry. CSS class names are as follows:

  • mobi-carousel
    • mobi-carousel-scroller
      • mobi-carousel-list
  • mobi-carousel-cursor
    • mobi-carousel-cursor-list

Component Documentation

carousel

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.