Bixby Developer Center

Guides
References

image-carousel

optionalmultiple allowed

Creates an image carousel to showcase a number of images of type or subtype BaseImage that are worth displaying to the user. Image carousels add personality to a page and can be used to dive further into points of interests, entertainment content, or events.

Users can swipe horizontally through the carousel or click on a specific image to bring the selected image in Lightbox mode. All images in image-carousel have a fixed ratio that is dependent on the device.

If users have more than the default 9 images on mobile, there is either "See All" slot that renders at the end of the carousel. Additionally, there is a pill at the upper left corner to indicate to users which image they are on. Clicking on this pill will bring users to a gallery view of all the images. You can customize this text using the show-more-text key.

Image Parameters

For each image that is used in this component, if any of the following fields are filled in, they are passed and rendered over the image, though none are required:

ParameterTypeDescription
titleTextPrimary text displayed
subTitleTextSecondary text displayed
captionTextBody text displayed

For more information on images, see the viv.Image library capsule documentation.

Examples

result-view {
match: Hotel (hotel) {
from-output: ShowHotelCarousel
}

message {
template ("Here is a hotel as a carousel:")
}

render {
layout {
section {
content {
image-carousel {
images (hotel.images)
}
}
}
}
}
conversation-drivers {
conversation-driver ("Show an image list")
}
}

View on GitHub

Here is how an image-carousel appears on different devices:

MobileWatchTV (Expanded View)Fridge
image-carouselimage-carouselimage-carouselimage-carousel
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Design Considerations

This component is applicable to these moments:

You can find design specifications for this component in the Components Spec download under Design Resources.

Child Keys

float-allowed
optional
This key is deprecated
image-background-color
optional
Determines the background color of an image
images
optional
Set of images to be used in the component
object-fit
optional
Determines how an image fits within a Bixby Views component
show-more-text
optional
Text to display if there are more than the default number of items rendered
urls[deprecated]
optional
This key is deprecated