Wijmo UI for the Web
wijcarousel jQuery Widget
Display a list of images in an image slider with previous and next buttons.
Syntax
$(function () {
    var options; // Type:  wijmo.carousel.wijcarousel.options
     
    $(".selector").wijcarousel(options);
});
function wijcarousel() : any;
Options
 NameDescription
public Option

The animation option determines whether and how images are scroll in the carousel. It defines the animation effect and controls other aspects of the widget's animation, such as duration and easing. Set the disable attribute to true in order to disable the animation effect. For a live example, see the Carousel Animation page in the Explore sample.

 
public Option

Default value: false

Allows pictures to be played automatically.

 
public Option

Default value: 'inside'

Determines the position value for next button and previous button. Possible values are: "inside" and "outside".

 
public Option

Default value: ""

Determines the innerHtml of the custom control.

 
public Option

A value that indicates the position settings for the custom control.

 
public Option

Default value: []

An object collection that contains the data of the carousel.

 
public Option

Default value: 1

Determines how many images should be shown in the view area.

 
public Option

Default value: 5000

Determines the time span between two pictures showing in autoplay mode.

 
public Option

Default value: true

Allows the carousel to loop back to the beginning.

 
public Option

Type: wijmo.carousel.btn_class_option

Determines the class of custom previous button. Includes the following sub-options "defaultClass", "hoverClass", "disableClass".

 
public Option

Default value: 'horizontal'

Determines the orientation of the pager. Possible values are: "vertical" & "horizontal"

 
public Option

A value that indicates the position settings for the pager.

 
public Option

Default value: 'numbers'

Determines the type of the pager in the carousel. Possible values are: "slider", "numbers", "dots", "thumbnails". For a live example, see the Carousel Paging page in the Explore sample.

 
public Option

Type: wijmo.carousel.btn_class_option

Determines the class of custom previous button. Includes the following sub-options "defaultClass", "hoverClass", "disableClass".

 
public Option

Default value: false

Determines if we should preview the last and next images. loop == false , orintation == "horizontal",display == 1.

 
public Option

Default value: true

Determines whether the caption of items should be shown.

 
public Option

Default value: false

Determines whether the custom control should be shown.

 
public Option

Default value: false

Determines whether the controls should be shown after created or when hovering on the dom element.

 
public Option

Default value: false

Determines whether to show the pager element. By default, if showPager is set to true, the pager will appear at the bottom right of the widget and allows run time carousel item navigation. You can customize the location and appearance of the pager by using the pagerPosition and pagerType options.

 
public Option

Default value: false

Determines if the timer of the carousel should be shown. If true, the timer appears by default at the top of the carousel with a play/pause button allowing carousel items to be automatically cycled through at run time.

 
public Option

Default value: 'horizontal'

Determines the orientation of the slider. Possible values are: "vertical" & "horizontal"

 
public Option

Default value: 0

Determines the custom start position of the image list in wijcarousel.

 
public Option

Default value: 1

Determines how many images will be scrolled when you click the Next/Previous button.

 
public Option

Determines the thumbnails list for a pager when pagerType is "thumbnails".

 
Top
Methods
 NameDescription
public MethodAdd a custom item with specified index.  
public MethodRemoves the wijcarousel functionality completely. This returns the element to its pre-init state.  
public MethodShows the next picture.  
public MethodStops automatically displaying the images in order.  
public MethodStarts automatically displaying each of the images in order.  
public MethodShows the previous picture.  
public MethodRefresh the carousel layout.Reset the layout, scrolled.  
public MethodRemove the item at specified index.  
public MethodScrolls to the picture at the specified index.  
public MethodReturns a jQuery object containing the original element or other relevant generated element.  
Top
Events
 NameDescription
public EventThis is the afterScroll event handler. It is a function called after scrolling to another image.  
public EventThis is the beforeScroll event handler. It is a function called before scrolling to another image.  
public EventThis is the itemClick event handler. It is a function called when the image is clicked.  
public EventThis is the loadCallback event handler. It is a function called after creating the dom element.  
Top
See Also

Widgets

Carousel

Reference

wijcarousel jQuery Widget