/

Carousels


Slides Only

BS5Carousel("carouselSlidesOnly", ["slide"], ["data-bs-ride":"carousel"], 
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])),
    BS5CarouselItem(          
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))))
<div id="carouselSlidesOnly" ["carousel slide" data-bs-ride="carousel"]
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"]
    )
  )
)

Controls

BS5Carousel("carouselControls", ["slide"], ["data-bs-ride":"carousel"], 
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])),
    BS5CarouselItem(          
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))),
  BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 
    H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")),
  BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"],
    H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")))
<div id="carouselControls" ["carousel slide" data-bs-ride="carousel"]
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"Fourth slide" ["d-block w-100"]
    )
  )
  <a href="#carouselControls" ["carousel-control-prev" role="button" data-bs-slide="prev"]
    H5Span(["carousel-control-prev-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Previous")
  </a>
  <a href="#carouselControls" ["carousel-control-next" role="button" data-bs-slide="next"]
    H5Span(["carousel-control-next-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Next")
  </a>
)

Indicators

BS5Carousel("carouselIndicators", ["slide"], ["data-bs-ride":"carousel"], 
  BS5CarouselIndicators(
    BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])
  ),
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])),
    BS5CarouselItem(          
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))))
<div id="carouselIndicators" ["carousel slide" data-bs-ride="carousel"]
  H5Ol(["carousel-indicators"]
    <li data-bs-target="#carouselIndicators" data-bs-slide-to="0" ["active"]")
    <li data-bs-target="#carouselIndicators" data-bs-slide-to="1"]")
    <li data-bs-target="#carouselIndicators" data-bs-slide-to="2"]")
    <li data-bs-target="#carouselIndicators" data-bs-slide-to="3"]")
  )
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/1200x600-info.png" "alt":"Fourth slide" ["d-block w-100"]
    )
  )
)

Captions

BS5Carousel("carouselCaptions", ["slide"], ["data-bs-ride":"carousel"], 
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the first slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the second slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the third slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the fourth slide")))))
<div id="carouselCaptions" ["carousel slide" data-bs-ride="carousel"]
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the first slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the second slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the third slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the fourth slide")
      )
    )
  )
)

Everything

Carousel with controls, indicators and captions

BS5Carousel("carouselCaptions", ["slide"], ["data-bs-ride":"carousel"], 
  BS5CarouselIndicators(
    BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])),
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the first slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the second slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the third slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the fourth slide")))),
  BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 
    H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")),
  BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"],
    H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")))
<div id="carouselAll" ["carousel slide" data-bs-ride="carousel"]
  H5Ol(["carousel-indicators"]
    <li data-bs-target="#carouselAll" data-bs-slide-to="0" ["active"]")
    <li data-bs-target="#carouselAll" data-bs-slide-to="1"]")
    <li data-bs-target="#carouselAll" data-bs-slide-to="2"]")
    <li data-bs-target="#carouselAll" data-bs-slide-to="3"]")
  )
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the first slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the second slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the third slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the fourth slide")
      )
    )
  )
  <a href="#carouselAll" ["carousel-control-prev" role="button" data-bs-slide="prev"]
    H5Span(["carousel-control-prev-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Previous")
  </a>
  <a href="#carouselAll" ["carousel-control-next" role="button" data-bs-slide="next"]
    H5Span(["carousel-control-next-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Next")
  </a>
)

Dark

Carousel with dark controls, indicators and captions

BS5Carousel("carouselDark", ["slide"], ["data-bs-ride":"carousel"], 
  BS5CarouselIndicators(
    BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])),
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the first slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the second slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the third slide"))),
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]),
      H5Div(["carousel-caption"], 
        H5H3("Caption"),
        H5P("This text describes the fourth slide")))),
  BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 
    H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")),
  BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"],
    H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")))
<div id="carouselDark" ["carousel slide carousel-dark" data-bs-ride="carousel"]
  H5Ol(["carousel-indicators"]
    <li data-bs-target="#carouselDark" data-bs-slide-to="0" ["active"]")
    <li data-bs-target="#carouselDark" data-bs-slide-to="1"]")
    <li data-bs-target="#carouselDark" data-bs-slide-to="2"]")
    <li data-bs-target="#carouselDark" data-bs-slide-to="3"]")
  )
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the first slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the second slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the third slide")
      )
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"]
      H5Div(["carousel-caption"]
        <h3>Caption", 
        <p>This text describes the fourth slide")
      )
    )
  )
  <a href="#carouselDark" ["carousel-control-prev" role="button" data-bs-slide="prev"]
    H5Span(["carousel-control-prev-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Previous")
  </a>
  <a href="#carouselDark" ["carousel-control-next" role="button" data-bs-slide="next"]
    H5Span(["carousel-control-next-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Next")
  </a>
)

Crossfade

BS5Carousel("carouselFade", ["slide"], ["data-bs-ride":"carousel"], 
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])),
    BS5CarouselItem(          
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))))
<div id="carouselFade" ["carousel slide carousel-fade" data-bs-ride="carousel"]
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"]
    )
  )
)

Options

Carousel with options defined with data attributes

BS5Carousel("carouselOptions", ["slide"], ["data-bs-ride":"carousel", "data-bs-pause":"false", "data-bs-wrap":"false", "data-bs-interval":"2000", "data-bs-keyboard":"false"], 
  BS5CarouselIndicators(
    BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]),
    BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])),
  BS5CarouselInner(
    BS5CarouselItem(["active"], 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])),
    BS5CarouselItem(          
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 
    BS5CarouselItem( 
      H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))),
  BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 
    H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")),
  BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"],
    H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 
    H5Span(["visually-hidden"], "Previous")))
<div id="carouselOptions" ["carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-interval="2000" data-bs-keyboard="false"]
  H5Ol(["carousel-indicators"]
    <li data-bs-target="#carouselOptions" data-bs-slide-to="0" ["active"]")
    <li data-bs-target="#carouselOptions" data-bs-slide-to="1"]")
    <li data-bs-target="#carouselOptions" data-bs-slide-to="2"]")
    <li data-bs-target="#carouselOptions" data-bs-slide-to="3"]")
  )
  H5Div(["carousel-inner"]
    H5Div(["carousel-item active"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"]
    )
    H5Div(["carousel-item" data-bs-interval="1000"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"]
    )
    H5Div(["carousel-item"]
      H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"]
    )
  )
  <a href="#carouselOptions" ["carousel-control-prev" role="button" data-bs-slide="prev"]
    H5Span(["carousel-control-prev-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Previous")
  </a>
  <a href="#carouselOptions" ["carousel-control-next" role="button" data-bs-slide="next"]
    H5Span(["carousel-control-next-icon" aria-hidden="true"]")
    H5Span(["visually-hidden"]Next")
  </a>
)