anura-slider

<anura-slider adapter="some-adapter" search="anura-tree" aria-live="polite"></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>

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.