Quarto Carousel Demo

This document demonstrates the quarto-carousel filter, which wraps Bootstrap’s Carousel Component.

Find the extension at github.com/tomicapretto/quarto-carousel.

Default carousels

Images

:::: {.carousel}

:::: {.carousel-item image="assets/imgs/puente-rosario_maximiliano-piu_cropped.jpg"}
:::

:::: {.carousel-item image="assets/imgs/bariloche_emilio-lujan_cropped.jpg"}
:::

:::: {.carousel-item image="assets/imgs/fitz-roy_ignacio-estevo_cropped.jpg"}
:::

:::

Text with dark theme

:::: {.carousel .dark}

:::: {.carousel-item}
Slide 1
:::

:::: {.carousel-item}
Slide 2

Multiple lines, too.
:::

:::

Framed carousels

With captions

:::: {.carousel .dark .framed}

:::: {.carousel-item image="assets/imgs/areco-nicolas-taylor_cropped.jpg" caption="Gauchos and horses in San Antonio de Areco"}
:::

:::: {.carousel-item image="assets/imgs/humahuaca_transly-translation-agency_cropped.jpg" caption="Llamas on Humahuaqueña grassland"}
:::

:::: {.carousel-item image="assets/imgs//mendoza_nicolas-perez_cropped.jpg" caption="Mendoza purple-petaled flowers"}
:::

:::

Without indicator buttons

:::: {.carousel .dark .framed indicators="false"}

:::: {.carousel-item image="assets/imgs/ushuaia_luuk-wouters_cropped.jpg" caption="Les Eclaireurs Lighthouse in Tierra del Fuego"}
:::

:::: {.carousel-item image="assets/imgs/iguazu_derek-oyen_cropped.jpg" caption="Argentine side of Iguazú Falls"}
:::

:::: {.carousel-item image="assets/imgs/jujuy_hector-ramon-perez_cropped.jpg" caption="Serranias del Hornocal in Jujuy"}
:::

:::

Without autoplay

:::: {.carousel .dark .framed indicators="false" autoplay="false"}

:::: {.carousel-item image="assets/imgs/puente-rosario_maximiliano-piu_cropped.jpg" caption="Puente Rosario-Victoria"}
:::

:::: {.carousel-item image="assets/imgs/bariloche_emilio-lujan_cropped.jpg" caption="San Carlos de Bariloche, Rio Negro"}
:::

:::: {.carousel-item image="assets/imgs/fitz-roy_ignacio-estevo_cropped.jpg"}
:::

:::

Without transition

:::: {.carousel .dark autoplay="false" transition="none"}

:::: {.carousel-item}
The transition
:::

:::: {.carousel-item}
Can go away
:::

:::: {.carousel-item}
If you need it
:::

:::

Slides with style

Background color

:::: {.carousel .dark .framed indicators="false" autoplay="false"}

:::: {.carousel-item style="background-color:rgba(0, 0, 0, 0.2);" caption="Has a caption"}
Slide 1
:::

:::: {.carousel-item style="background-color:rgba(0, 0, 0, 0.4);"}
Slide 2, does not
:::

:::: {.carousel-item style="background-color:rgba(0, 0, 0, 0.6);" caption="bring it back!"}
But then we can
:::

:::

Multiple heights

:::: {.carousel .dark .framed indicators="false" autoplay="false"}

:::: {.carousel-item style="background-color:rgba(159,188,174, 1);" caption="Default height"}
Is this...
:::

:::: {.carousel-item style="background-color:rgba(175,199,188, 1); height: 400px;" caption="400px"}
going alright?
:::

:::: {.carousel-item style="background-color:rgba(191,210,201, 1); height: 600px;" caption="that's too much!"}
Oh, no!
:::

:::