Bixby Developer Center

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 tap 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, the show-more-text slot renders at the end of the carousel over the last shown image. The default text differs by device, but you can customize this text with the show-more-text key. Additionally, there is a pill at the upper left corner to indicate to users which image they are on. Tapping on this pill will bring users to a gallery view of all the images.

Interactive Demo

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

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:

For more information on images, see the viv.core 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 master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

Design Considerations

This component is applicable to these moments:

• Result Moment while Providing Details
• Confirmation Moment

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