Native Features#

Below are options that expose native features of Bootstrap carousels.

Controls#

Official documentation for this feature

Display previous and next controls overlayed on top of the carousel by using :show_controls:. Enable this by default with carousel_show_controls.

.. carousel::
    :show_controls:

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

Indicators#

Official documentation for this feature

Display image indicators overlayed on top of the carousel by using :show_indicators:. Enable this by default with carousel_show_indicators.

.. carousel::
    :show_indicators:

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

Crossfade#

Official documentation for this feature

Animate slides with a fade transition instead of a slide by using :show_fade:. Enable this by default with carousel_show_fade.

.. carousel::
    :show_controls:
    :show_fade:

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

Dark Mode#

Official documentation for this feature

Show darker controls, indicators, and captions by using :show_dark:. Enable this by default with carousel_show_dark.

.. carousel::
    :show_controls:
    :show_indicators:
    :show_dark:

    .. 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.

Additional Options#

The following are additional options supported by Bootstrap carousels.

Interval#

Can be an integer or “false” to disable automatic cycling/animation.

.. carousel::
    :data-bs-interval: false
    :show_controls:

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

Keyboard, Touch, Wrap#

.. carousel::
    :data-bs-keyboard: false
    :data-bs-touch: false
    :data-bs-wrap: false
    :show_controls:

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

Pause, Ride#

.. carousel::
    :data-bs-pause: false
    :data-bs-ride: false
    :show_controls:

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