# Carousel

Use this block to add small images on a swipeable carousel.

There are also other blocks which can be used to add images:

- [Image](https://bookstack.iconography.co.uk/books/general/page/image "Image") (simple images)
- [Hero](https://bookstack.iconography.co.uk/books/general/page/hero "Hero") (large rotating banners)
- [Parallax](https://bookstack.iconography.co.uk/books/general/page/parallax "Parallax") (an image that sits behind content, adding depth to a page)
- [Feature](https://bookstack.iconography.co.uk/books/general/page/feature "Feature") (a styled image)
- [Multi-Feature](https://bookstack.iconography.co.uk/books/general/page/multi-feature "Multi-Feature") (multiple static images in a single block)
- [Wide Feature](https://bookstack.iconography.co.uk/books/general/page/wide-feature "Wide-Feature") (image with a block of text)

## Appearance

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-11/scaled-1680-/92simage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-11/92simage.png)

## Editing the Block

### Content

Each image has an expandable menu, allowing it to be edited individually.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-12/scaled-1680-/image.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-12/image.png)

Images may be dragged around to resequence them.

<table border="1" id="bkmrk-field-purpose-link-e" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.881%;"></col><col style="width: 49.881%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a link to the image*</td></tr><tr><td>Alt Text</td><td>*Amend the Alt Text for the image*

</td></tr><tr><td>Summary</td><td>*Enter text that will be shown below the image*</td></tr><tr><td>Delete Image</td><td>*Use the tick box to delete an image - you will be asked to confirm your action*</td></tr></tbody></table>

Use the Image dialogue to select images to upload to this block.

### Settings

<p class="callout info">Block width is not editable for the Hero block - it is always set to 100%.</p>


<table border="1" id="bkmrk-field-purpose-visibi" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.881%;"></col><col style="width: 49.881%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Visibility</td><td>*Set the block visibility from the list:*

- *Default (both)*
- *Desktop Only*
- *Mobile Only*
- *Hidden (none)*

</td></tr><tr><td>Items Visible</td><td>*Define how many images will be visible to the page visitor without scrolling*

</td></tr></tbody></table>

#### Additional Options

<table border="1" id="bkmrk-field-purpose-mouse-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.947%;"></col><col style="width: 49.947%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Mouse Drag</td><td>*Allow a user to mouse drag/swipe to scoll through the Carousel* </td></tr><tr><td>Alt Style</td><td>*Alters the amount of padding between each image within the block*</td></tr><tr><td>Caption on Right?</td><td>*Choose to show the Summary text below the image, or to the right of the image*</td></tr><tr><td>Auto-play</td><td>*Set the Carousel to auto scroll*</td></tr><tr><td>Loop?</td><td>*Set the auto scroll on a loop*</td></tr></tbody></table>

### Advanced

#### Padding

Adding padding will insert space within the current block; this will adjust the position of content within the block.

More information is available [here](https://bookstack.iconography.co.uk/books/general/page/padding).

#### Margin

The margin will add additional space around the current block.

More information is available [here](https://bookstack.iconography.co.uk/books/general/page/margin).