JavaScript API (properties, public methods and callbacks)

1. Properties

Property NameValueDescription
xmlSource null The path to the XML source file.
width 500 The width of the carousel container.
height 300 The height of the carousel container.
itemWidth 100 The width of the carousel item.
itemHeight 100 The height of the carousel item.
horizontalRadius 250 The horizontal radius of the carousel.
verticalRadius 100 The vertical radius of the carousel.
resize true Indicates whether the items will be resized to the specified width and height.
maintainAspectRatio true Indicates whether the aspect ratio of the images will be maintained if the items are resized.
crop false Indicates whether the images will be cropped.
scaleRatio 0.5 Indicates the maximum amount by which the items in the back of the carousel will be scaled during rotation.
mouseScroll false Enables the mouse scroll mode.
scrollOnClick true Indicates whether the carousel will scroll to an item that was clicked.
mouseDrag false Enables the mouse drag mode.
scrollbar false Enables the scrollbar.
mouseWheel false Enables the mouse wheel scroll.
arrowScrollAmount 50 Indicates the amount by which the carousel will scroll if the scrollbar's arrows are clicked.
tooltip true Enables the tooltips.
mouseScrollEase 90 The easing of the rotation when the mouse scroll stops.
mouseDragEase 10 The easing of the rotation when the mouse drag stops.
scrollbarEase 10 The easing of the rotation when the scrollbar's thumb is not dragged.
scrollSpeed 10 The speed of the rotation when scrollToItem(), scrollToNext() and ScrollToSpeed() are used.
mouseDragSpeed 20 The speed of the rotation when mouse drag is used.
mouseScrollSpeed 10 The speed of the rotation when mouse scroll is used.
mouseScrollSpeedHover 3 The speed of the rotation when mouse scroll is used and the mouse pointer is over the carousel's items.
mouseWheelSpeed 10 The speed of the rotation when mouse wheel is used.
autoScroll false Rotates the carousel automatically.
autoScrollDelay 3000 The delay between each rotation.
autoScrollDirection 'next' The direction in which the carousel will be rotated. Possible values are 'next' and 'previous'.
pauseAutoScrollIfTooltip true Indicates whether the auto scrolling will be paused when a tooltip is displayed.
mouseScrollReverse false Rotates the carousel in the reversed direction when mouse scroll is used.
mouseDragReverse false Rotates the carousel in the reversed direction when mouse drag is used.
mouseWheelReverse false Rotates the carousel in the reversed direction when mouse wheel is used.
linkTarget '_blank' Indicates where the URL window will be opened if a link was specified. Possible values are: '_blank', '_self', '_parent', '_top'.

2. Public Methods

Method NameDescription
scrollToItem(index) Scrolls to the specified index.
scrollToNext() Scrolls to the next item.
scrollToPrevious() Scrolls to the previous item.
isScrolling() Returns 'true' if the carousel is currently scrolling.
startMouseWheel() Enables the mouse wheel scrolling.
stopMouseWheel() Disables the mouse wheel scrolling.
startMouseDrag() Enables the mouse drag scrolling.
stopMouseDrag() Disables the mouse drag scrolling.
startMouseScroll() Enables the mouse scroll mode.
stopMouseScroll() Disables the mouse scroll mode.

Example:

<script type="text/javascript">

    var carousel;
	
    jQuery(document).ready(function($){
        carousel = $('#carousel').carousel({
                       width: 870, 
                       height: 350, 
                       itemWidth:120,
                       autoScroll:true
                   });
				   
        carousel.scrollToItem(0);
    });
	
	
    function nextItem() {
        carousel.scrollToNext();
    }
	
	
    function previousItem() {
        carousel.scrollToPrevious();
    }
	
</script>

</head>

<body>
	 
    <ul id="carousel">
        ...
    </ul>
		
    <div id="controls">
        <a id="left" onclick="previousItem()"></a>
        <a id="auto-scroll" onclick="toggleAutoScroll()"></a>
        <a id="right" onclick="nextItem()"></a>
    </div>
    
</body>

3. Callbacks

Callback NameDescription
itemSelect Triggered when an item is selected.
itemClick Triggered when an item is clicked.
itemMouseOver Triggered when the mouse pointer moves over an item.
itemMouseOut Triggered when the mouse pointer moves out of an item.
scrollComplete Triggered when the carousel's rotation animation is complete.

Each of these callback functions will return an object that contains information about the item that triggered the event. The information contained is the index of the item, if available (0, 2, 5, etc.), the type of event (itemClick, scrollComplete, etc.), and a 'data' object, if available, that contains all the item's data.

Example:

<script type="text/javascript">
<script type="text/javascript">

    var carousel;
	
    jQuery(document).ready(function($){
        carousel = $('#carousel').carousel({
                       width: 870, 
                       height: 350
                       itemClick:onItemClick
                   });
    });	
	
	
    function onItemClick(event) {
        console.log(event.index);
        console.log(event.data);
    }
	
</script>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk