Usage

To use Bootstrap Carousels in a document use the carousel Sphinx directive to define a carousel, and within it use one or more image directives or if you want captions use one or more figure directives. Below is an example carousel using an image and a figure.

Note

Captions are hidden on mobile viewports. A workaround is to use show_captions_below.

.. carousel::
    :show_controls:

    .. image:: https://i.imgur.com/fmJnevTl.jpg

    .. figure:: https://i.imgur.com/fWyn9A2l.jpg

        Title and Description

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.

````{carousel}
:show_controls:

```{image} https://i.imgur.com/fmJnevTl.jpg
```

```{figure} https://i.imgur.com/fWyn9A2l.jpg
Title and Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
````

```{carousel}
:show_controls:

:::{image} https://i.imgur.com/fmJnevTl.jpg
:::

:::{figure} https://i.imgur.com/fWyn9A2l.jpg
Title and Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
:::
```

Linked Images

Since we’re using the standard image/figure directives we can use the :target: option to turn images into hyperlinks:

.. carousel::
    :show_controls:

    .. image:: https://i.imgur.com/fmJnevTl.jpg
        :target: https://google.com

    .. figure:: https://i.imgur.com/fWyn9A2l.jpg
        :target: https://imgur.com

        Title and Description

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.

````{carousel}
:show_controls:

```{image} https://i.imgur.com/fmJnevTl.jpg
:target: https://google.com
```

```{figure} https://i.imgur.com/fWyn9A2l.jpg
:target: https://imgur.com

Title and Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
````

```{carousel}
:show_controls:

:::{image} https://i.imgur.com/fmJnevTl.jpg
:target: https://google.com
:::

:::{figure} https://i.imgur.com/fWyn9A2l.jpg
:target: https://imgur.com

Title and Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
:::
```

Captions Without Titles

If you have an image with a short caption it may look better without bold text. To disable the caption title use “..” (an empty RST comment) or “%” in MyST.

.. carousel::
    :show_controls:

    .. figure:: https://i.imgur.com/fmJnevTl.jpg

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.

    .. figure:: https://i.imgur.com/fWyn9A2l.jpg

        ..

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.

````{carousel}
:show_controls:

```{figure} https://i.imgur.com/fmJnevTl.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
```

```{figure} https://i.imgur.com/fWyn9A2l.jpg

%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
````

```{carousel}
:show_controls:

:::{figure} https://i.imgur.com/fmJnevTl.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
:::

:::{figure} https://i.imgur.com/fWyn9A2l.jpg

%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
:::
```