---
title: anura-slider
url: 'https://doc.brix.ch/anura/webcomponents/components/slider'
markdown: 'https://doc.brix.ch/anura/webcomponents/components/slider.md'
lang: en
date: '2026-10-26'
description: 'Technical documentation for brix:anura webcomponents – Software developed by brix'
taxonomy:
  category:
    - docs
---

[](#) 

  [ Welcome ](https://doc.brix.ch/)     [ brix:anura ](https://doc.brix.ch/anura)     [ Anura Webcomponents ](https://doc.brix.ch/anura/webcomponents)     [ Components ](https://doc.brix.ch/anura/webcomponents/components)      anura-slider    

# anura-slider

#### Table of Contents

- [Attributes](#attributes)
- [Events](#events)

```html
<anura-slider adapter="some-adapter" search="anura-tree"></anura-slider>
```

A simple image slider, intended as a visual element and thus lacking the usual buttons/lightbox/paginators when compared to other main views.

Note that only images are supported (for obvious reasons).

## Attributes

### height

> required: **probably**, live: on-load, default: 500px

The desired height of your slider. This should probably not exceed the height of your preview images.

### node

> required: **when no *search* is provided**, live: yes, default: -

The content of which node that the slider should display. This will cause the gallery to ask its *adapter* for the content of said node.

`<anura-slider node="123"></anura-slider>`

### search

> required: **when no *node* is provided**, live: yes, default: -

Which component the slider should get its instructions from, e.g.:

- `anura-tree`
- `anura-searchbar`
- `anura-select`

You can combine multiple search components, e.g. `anura-tree,anura-searchbar`, which will be ANDed together. Depending on where they live, you may use a selector such as `aside > *`.

`<anura-slider search="#sidebar > *"></anura-slider>`

### sort

> required: no, live: yes, default: -

How the displayed assets should be sorted, ending in either `_asc` or `_desc`. The exact wording will depend on your *adapter*, e.g. `name_asc`. Known values:

- Bynder: `name, dateCreated, dateModified, datePublished`
- CELUM: `id, name, uploaddate, lastmodified, extension, assettype, score, original(name), (file)size, info_{id}`, default is `id`
- Sharedien: `relevance, file_name, system_import_date`, default is `relevance`

`<anura-slider sort="name_asc"></anura-slider>`

### mode

> required: no, live: yes, default: slide-right

What kind of animation the slider should use. Known values:

- `slide-right` - slides in images from the right
- `slide-left` - slides in images from the left
- `fade-in` - fades images in over one another
- `album` - the previous and next image are still visible to the left and right

`<anura-slider mode="fade-in"></anura-slider>`

### fit

> required: no, live: yes, default: contain

How to fit the images into the slider, either `contain` (adds whitespace) or `cover` (clips images)

## Events

### assets-loading

> `{details: {node: nodeId, search: search-terms, keepContent: bool, pageRequest: pageRequest}}`

When the gallery is loading new assets, either through a node or a search request. A good time to clear counters and such.

### assets-loaded

> `{details: {total: totalCount, assets: AnuraAsset[], pageRequest: pageRequest}}`

When assets have been loaded (through whatever mechanism), informs other components (such as `anura-paginator`) about the total number of assets, the new assets themselves, as well as the pageRequest (contains current paging information).

### asset-added

> `{details: {asset: assetData, instance: imgtInstance}}`

When an individual asset has been added to the slider. Useful when you want to tweak something.

 [ ](https://doc.brix.ch/anura/webcomponents/components/select) [](https://doc.brix.ch/anura/webcomponents/components/table)

---

## Navigation

- Parent: [Components](https://doc.brix.ch/anura/webcomponents/components.md)
- Previous: [anura-select](https://doc.brix.ch/anura/webcomponents/components/select.md)
- Next: [anura-table](https://doc.brix.ch/anura/webcomponents/components/table.md)