Image Picker

<sl-image-picker> | SlImagePicker
Since 1.0 stable

Image picker.

<sl-image-picker>
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
</sl-image-picker>

Examples

With max display

Set a maximum number of images can be displayed using max-display, if there are more images, it will collapsed. User can expand using See more See less text. Default is 8, if set to negative or zero, all images will be shown.

Images 
<sl-image-picker max-display="8">
  <span slot="label">Images</span>
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
</sl-image-picker>

Show all images always

Images 
<sl-image-picker>
  <span slot="label">Images</span>
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
</sl-image-picker>

With a pre-selected image

Images 

<sl-image-picker max-display="5" selected-index="12">
  <span slot="label">Images</span>
  <img  src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
  <img src="/next/assets/examples/carousel/mountains.jpg" />
  <img src="/next/assets/examples/carousel/waterfall.jpg" />
  <img src="/next/assets/examples/carousel/sunset.jpg" />
  <img src="/next/assets/examples/carousel/field.jpg" />
  <img src="/next/assets/examples/carousel/valley.jpg" />
</sl-image-picker>

[component-metadata:sl-image-picker]

Slots

Name Description
(default) The default slot. Contains the images
label the label to be shown

Learn more about using slots.

Properties

Name Description Reflects Type Default
selectedIndex
selected-index 		The index of the currently selected image. number -1
noOpacity
no-opacity 		Whether to disable the opacity effect on images. boolean false
maxDisplay
max-display 		The maximum number of images to display. - Infinity
expanded Whether the image picker is expanded to show all images if the number of images exceeds the max display limit. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-change When an image is clicked. -
sl-input When an image is clicked. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.