Carousel

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

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Include carousel slides in Logi Info Application Include carousel slides in Logi Info Application

Options

interval The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause: If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it.
wrap: Whether the carousel should cycle continuously or have hard stops.
keyboard: Whether the carousel should react to keyboard events.

Example

Slide 1

Slide content

Slide 2

Slide content

Slide 3

Slide content

<Division Class="carousel slide" HtmlDiv="True">
  <DataList Class="carousel-indicators" ID="carouselLst" Ordered="False">
    <DataLayer ID="dlSlides" Type="Static">
      <StaticDataRow class="active" slideNum="0" />
      <StaticDataRow class="" slideNum="1" />
      <StaticDataRow class="" slideNum="2" />
    </DataLayer>
    <ListItem Class="[at]Data.class[tilde]">
      <EventHandler DhtmlEvent="onclick">
        <Action Javascript="$(this).closest('.carousel').carousel([at]Data.slideNum[tilde]);" Type="Javascript" />
      </EventHandler>
    </ListItem>
  </DataList>
  <Division Class="carousel-inner text-center" HtmlDiv="True">
    <Division Class="carousel-item active" HtmlDiv="True">
      <Image Caption="carousel.slide1.svg" Class="w-100" Tooltip="First slide" />
      <Division Class="carousel-caption" HtmlDiv="True">
        <Label Caption="Slide 1" Class="text-center" HtmlTag="H5" />
        <Label Caption="Slide content" HtmlTag="P" />
      </Division>
    </Division>
    <Division Class="carousel-item" HtmlDiv="True">
      <Image Caption="carousel.slide2.svg" Class="w-100" Tooltip="Second slide" />
      <Division Class="carousel-caption" HtmlDiv="True">
        <Label Caption="Slide 2" Class="text-center" HtmlTag="H5" />
        <Label Caption="Slide content" HtmlTag="P" />
      </Division>
    </Division>
    <Division Class="carousel-item" HtmlDiv="True">
      <Image Caption="carousel.slide3.svg" Class="w-100" Tooltip="Third slide" />
      <Division Class="carousel-caption" HtmlDiv="True">
        <Label Caption="Slide 3" Class="text-center" HtmlTag="H5" />
        <Label Caption="Slide content" HtmlTag="P" />
      </Division>
    </Division>
  </Division>
  <Division Class="carousel-control-prev" ID="carCtlPrev">
    <Label Class="carousel-control-prev-icon" />
    <Action Javascript="$(this).closest('.carousel').carousel('prev');" Type="Javascript" />
  </Division>
  <Division Class="carousel-control-next" ID="carCtlNext">
    <Label Class="carousel-control-next-icon" />
    <Action Javascript="$(this).closest('.carousel').carousel('next');" Type="Javascript" />
  </Division>
</Division>