Carousel (Bootstrap)

From NSB App Studio
Jump to navigation Jump to search

Description

See Bootstrap's docs for full information


A slideshow component for cycling through elements—images or slides of text—like a carousel.

How it works The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Nested carousels are not supported. You should also be aware that carousels in general can often cause usability and accessibility challenges.

Properties and Methods

Standard properties are supported, plus:

autoplay Set to Carousel to start playing immediately, set to Ride to start after user interaction.
buttons Show Prev and Next buttons on the image, for user to scroll.
captions Captions for each image, one per line.
crossfade Use a crossfade when going to next slide.
descriptions Descriptions for each image, one per line.
images A list of images, one per line. Most image formats are supported.
indicators Show indicators to go to slides directly?
interval How long to display an image before going to next one. In milliseconds. Default 2000.

Methods

Use:

$("#Carousel1").carousel("pause")
$("#Carousel1").carousel(0)
cycle Starts cycling through the carousel items from left to right.
next Cycles to the next slide.
pause Stops the carousel.
prev Cycles to the previous slide.
(n) Cycles to the nth slide

Events

Standard events are supported. For this control, the onclick event will be most useful.

Example

// JavaScript
Button1.onclick = function () {
  $("#Carousel1").carousel("pause");
};

Button2.onclick = function () {
  $("#Carousel1").carousel(0);
};

' Basic
Function Button1_onclick()
  $("#Carousel1").carousel("pause")
End Function

Function Button2_onclick()
  $("#Carousel1").carousel(0)
End Function

Output