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.
:::
:::Minimalist carousel
Default duration
:::: {.carousel controls="false" indicators="false"}
:::: {.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"}
:::
:::Custom duration
:::: {.carousel controls="false" indicators="false" duration=1500}
:::: {.carousel-item image="assets/imgs/jujuy_hector-ramon-perez_cropped.jpg"}
:::
:::: {.carousel-item image="assets/imgs/ushuaia_luuk-wouters_cropped.jpg"}
:::
:::: {.carousel-item image="assets/imgs/puente-rosario_maximiliano-piu_cropped.jpg"}
:::
:::
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"}
:::
:::
Gauchos and horses in San Antonio de Areco
Llamas on Humahuaqueña grassland
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"}
:::
:::Les Eclaireurs Lighthouse in Tierra del Fuego
Argentine side of Iguazú Falls
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"}
:::
:::Puente Rosario-Victoria
San Carlos de Bariloche, Rio Negro
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!
:::
:::