<p>See <a href="/docs/markdown/components/components" title="Components 101">Components 101</a> to learn more about Mixa Components</p>
<p>Carousel will rotate the images you provide with an interval or buttons. You can use any markdown image syntax. It supports both local and remote images.</p>
<h2 id="default-carousel"><a aria-hidden="true" tabindex="-1" href="#default-carousel"><span class="icon icon-link"></span></a>Default carousel</h2>
<p>By default images will rotate with a 5-second interval</p>
<p>Images can be remote images or local images with the usual syntax</p>
<pre><code>:::carousel
![](https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg)
![](https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg)
![](https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg)
![](https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg)
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><carousel images="https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg" attrs="{&#x22;images&#x22;:[&#x22;https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg&#x22;]}"><p><br>
<br>
<br>
</p></carousel></div>
<h2 id="adding-buttons"><a aria-hidden="true" tabindex="-1" href="#adding-buttons"><span class="icon icon-link"></span></a>Adding buttons</h2>
<h3 id="arrow-buttons"><a aria-hidden="true" tabindex="-1" href="#arrow-buttons"><span class="icon icon-link"></span></a>Arrow Buttons</h3>
<pre><code>:::carousel{arrow-button}
![](https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg)
![](https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg)
![](https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg)
![](https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg)
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><carousel arrow-button="" images="https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg" attrs="{&#x22;arrow-button&#x22;:&#x22;&#x22;,&#x22;images&#x22;:[&#x22;https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg&#x22;]}"><p><br>
<br>
<br>
</p></carousel></div>
<h3 id="number-buttons"><a aria-hidden="true" tabindex="-1" href="#number-buttons"><span class="icon icon-link"></span></a>Number Buttons</h3>
<pre><code>:::carousel{number-button}
![](https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg)
![](https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg)
![](https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg)
![](https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg)
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><carousel number-button="" images="https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg" attrs="{&#x22;number-button&#x22;:&#x22;&#x22;,&#x22;images&#x22;:[&#x22;https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg&#x22;]}"><p><br>
<br>
<br>
</p></carousel></div>
<h2 id="changing-interval"><a aria-hidden="true" tabindex="-1" href="#changing-interval"><span class="icon icon-link"></span></a>Changing interval</h2>
<h3 id="disable-auto-rotation"><a aria-hidden="true" tabindex="-1" href="#disable-auto-rotation"><span class="icon icon-link"></span></a>Disable auto-rotation</h3>
<pre><code>:::carousel{interval=0}
![](https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg)
![](https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg)
![](https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg)
![](https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg)
:::
</code></pre>
<h3 id="change-interval-value"><a aria-hidden="true" tabindex="-1" href="#change-interval-value"><span class="icon icon-link"></span></a>change interval value</h3>
<p>value provided is in milliseconds. To make it move to the next image every 8 seconds, you can provide 8000</p>
<pre><code>:::carousel{interval=1000}
![](https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg)
![](https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg)
![](https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg)
![](https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg)
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><carousel interval="1000" images="https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg" attrs="{&#x22;interval&#x22;:&#x22;1000&#x22;,&#x22;images&#x22;:[&#x22;https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg&#x22;,&#x22;https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg&#x22;]}"><p><br>
<br>
<br>
</p></carousel></div>

Creating your site

Installing Mixa Obsidian Plugin

Setting up a Blog With Obsidian/Markdown

Blog

Resume

Using Mixa With Notion

Components

Carousel

Column

Hero

Video

Callouts

Image

Link

Math

Text

Site Editor

Setup

SEO and Analytics

Navigation

Code

Features

Theme

Sitemap and RSS

Search

Home Page

Scheduled Publishing

Static Files

Frontmatter

Quick Start

quick-start

templates

Notion

notion

components

Syntax

syntax

Markdown

markdown

site-editor

features

docs