https://github.com/tomicapretto/quarto-carousel
A carousel extension for HTML documents in Quarto
https://github.com/tomicapretto/quarto-carousel
carousel carousel-component quarto-extension quarto-filter
Last synced: 28 days ago
JSON representation
A carousel extension for HTML documents in Quarto
- Host: GitHub
- URL: https://github.com/tomicapretto/quarto-carousel
- Owner: tomicapretto
- Created: 2025-11-30T00:24:14.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-03T15:15:35.000Z (7 months ago)
- Last Synced: 2025-12-05T17:55:52.788Z (7 months ago)
- Topics: carousel, carousel-component, quarto-extension, quarto-filter
- Language: Lua
- Homepage:
- Size: 12.6 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bootstrap Carousel for Quarto
This extension exposes [Bootstrap’s Carousel component](https://getbootstrap.com/docs/5.3/components/carousel/) for use in Quarto HTML documents.
## Installation
```sh
quarto add tomicapretto/quarto-carousel
```
This command installs the extension under the `_extensions` directory.
If you are using version control, make sure to commit this directory.
## Usage
Include the following in your YAML front matter to activate the filter:
```yaml
filters:
- carousel
```
Then, you can create (text based) carousels in the following way:
```markdown
:::: {.carousel}
:::: {.carousel-item}
Slide 1
:::
:::: {.carousel-item}
Slide 2
Multiple lines, too.
:::
:::: {.carousel-item}
Slide 3
:::
:::
```
Or image-based carousels like this:
```markdown
:::: {.carousel}
:::: {.carousel-item image="path/to/image.jpg"}
:::
:::: {.carousel-item image="path/to/image2.jpg"}
:::
:::: {.carousel-item image="path/to/image3.jpg"}
:::
:::
```
## Example
Here is the source code for a minimal example: [example.qmd](example.qmd).
Rendered output of `example.qmd` in HTML format: [https://tomicapretto.com/quarto-carousel/](https://tomicapretto.com/quarto-carousel/).
## Photo Credits
Photo by Maximiliano Piu on Unsplash
Photo by Emilio Luján on Unsplash
Photo by Ignacio Estevo on Unsplash
Photo by Nicolas Taylor on Unsplash
Photo by Transly Translation Agency on Unsplash
Photo by Derek Oyen on Unsplash
Photo by Hector Ramon Perez on Unsplash
Photo by Nicolas Perez on Unsplash
Photo by Luuk Wouters on Unsplash