System StatusSamples on GitHub

carousel

The carousel is an interactive component that enables you to browse through a set of items visually appealing and intuitively, enhancing the overall experience by making navigation of content engaging and dynamic. The carousel component provides a set of items, such as images, products, or content, that can be browsed by swiping left or right. The carousel showcases multiple items in a horizontal scrolling format with only one item visible at a time. In addition to swipe gestures, navigation identifiers are included in dots or a counter. The dots/counter indicates the current position within the carousel.

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure

data

The carousel requires a data source that will be used in the component to return the content, for, example, images or avatars. Any of the can be referenced to return the data.

instanceId

The unique identifier for the carousel.

type

The following components can be added in a carousel: component can be define with title and subtitle that overlays the image. card - component allows you to add other components in a card layout in the carousel.

Other options

counter

Set to true adds a counter to the top right corner of the carousel in the style similar to 1/4 to indicate the number of images or cards in the carousel. set to false hides the counter. The counter and pagination can be used together or individually, depending on the requirement.

isContained

Set to true places the content (type) in a container which creates a visually appealing frame around the content. Set to false the content fills the entire carousel.

pagination

Pagination is shown as dots at the bottom of the carousel. The following options exist:

  • isContained - created a grey container around the pagination dots improving visibility.

  • isHidden - false hides the pagination, true shows the pagination.

  • position - The pagination dots can be places inside or outside the carousel.

Considerations

  • Carousel can only be used in a jig.default.

  • Styling, functionality, events can be configured on the type component, for example, onPress or height settings.

  • The carousel uses the same approach as the list component when working with data, making it easy to configure using the [email protected] expression.

  • Planning the layout of the carousel before you configure the component will save time, and ensure the correct component type is used.

  • Consider limiting the number of images used for the carousel to have maximum effect.

  • The card component is versatile, allowing you to combine multiple components into the carousel. For an example, see the carousel with card containing avatars, expander & location.

Examples and code snippets

Image carousel

Basic carousel
Basic carousel

This examples displays images in the carousel. The image component is used with an overlapping title and subtitle. The pagination is configured to show outside of the carousel. An onPress event is added to the image component to open an info-modal displaying further information, in this case to book a test-drive.

Example: See the example in GitHub.

carousel-image.jigx
title: Carousel with image
type: jig.default

datasources:
  models:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Model A
          price: $ 48000  
          image: https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=2566&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 2
          name: Model B
          price: $ 30000  
          image: https://images.unsplash.com/photo-1555353540-64580b51c258?q=80&w=2556&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 3
          name: Model c
          price: $ 27000   
          image: https://images.unsplash.com/photo-1502877338535-766e1452684a?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 4
          name: Model D
          price: $ 15000  
          image: https://images.unsplash.com/photo-1522932467653-e48f79727abf?q=80&w=2630&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D    

children:
  - type: component.carousel
    
    options:
      
      data: [email protected]
      item: 
        type: component.card
        options:
          children:
            - type: component.image
              options:
                title: New Models
                subtitle: Power and luxury
                onPress: 
                  type: action.info-modal
                  options:
                    modal:
                      title: Today's luxury 
                      buttonText: Book a test drive
                      element: 
                        type: image
                        uri: [email protected]
                  
                source:
                  uri: [email protected]
      isContained: true
      pagination:
        isContained: false
        isHidden: false
        position: outside
      counter:
        isHidden: true

  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Welcome to carX
            children:
              - type: component.entity-field
                options:
                  label: ''
                  value:
                   At Premier Auto Sales, we pride ourselves on delivering an exceptional car-buying experience tailored to meet the diverse needs of our valued customers. With a vast selection of the latest models from top manufacturers, alongside a curated collection of certified pre-owned vehicles, we ensure that you find the perfect car to match your lifestyle and budget.
                  isMultiline: true
        - type: component.entity-field
          options:
            label: Visit our showroom
            value: 24 Main road, Houston, Texaz
        - type: component.entity-field
          options:
            label: Call us today!
            value: 10-234-5556

Card carousel

Card in a carousel
Card in a carousel

In this example the carousel uses a card component with a color property, within the card, there is an image component used to display the images, an entity-field component to describe the product. The card component creates a visually appealing container for the images. The pagination is configured outside of the carousel.

Example: See the example in GitHub.

carousel-card.jigx
title: Carousel with card
type: jig.default

children:
  - type: component.carousel
    options:
      data: [email protected]
      item: 
        type: component.card
        options:
          children:
            - type: component.image
              options:
                source:
                  uri: [email protected]
            - type: component.entity
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Product
                      value: [email protected] 
          color: color1
      isContained: true
      pagination:
        isContained: false
        isHidden: false
        position: outside
      counter:
        isHidden: true

Carousel contained

This example uses a static datasource with an image component in the carousel. There are two carousels.

  1. The first carousel is configured to isContained: true which creates a frame around the image, and rounds the image border. Pagination is also set with isContained: true to create a gray frame around the pagination dots.

  2. The second carousel is set with isContained: false to display the image across the full screen. Pagination is also set to isContained: false to show the pagination dots in black.

Example: See the example in GitHub.

Carousel contained
Carousel contained
carousel-contained

title: Carousel contained
type: jig.default

datasources:
  products:
    type: datasource.static
    options:
      data:
        - id: 1
          image: https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=2599&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 2
          image: https://plus.unsplash.com/premium_photo-1676717962720-d9a812c8f8c9?q=80&w=2748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 3
          image: https://images.unsplash.com/photo-1568386453619-84c3ff4b43c5?q=80&w=2728&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 4
          image: https://images.unsplash.com/photo-1479064555552-3ef4979f8908?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 5
          image: https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?q=80&w=2193&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 6
          image: https://images.unsplash.com/photo-1593998066526-65fcab3021a2?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.section
    options:
      title: Carousel contained & pagination contained
      children:
        - type: component.carousel
          options:
            isContained: true
            pagination: 
              isContained: true
              position: outside
              
            data: [email protected]
            item:
              type: component.image
              options:
                source:
                  uri: [email protected]
  - type: component.section
    options:
      title: Carousel not contained & pagination not contained
      children:
        - type: component.carousel
          options:
            isContained: false
            pagination: 
              isContained: false
              position: outside  
            data: [email protected]
            item:
              type: component.image
              options:
                source:
                  uri: [email protected]

Carousel with pagination (inside & outside)

Pagination
Pagination

This example uses a static datasource and shows how pagination can be placed either inside or outside the carousel. There are two carousels.

  1. The first carousel is in a card with color and configured with pagination: outside which places the pagination outside under the carousel.

  2. The second carousel is configured in an image with pagination: inside which overlays the image with the pagination. Pagination is also set to isContained: true to enhance the visibility of the pagination dots.

Example: See the example in GitHub.

carousel-pagination-inside-outside.jigx
title: Carousel with pagination
type: jig.default

datasources:
  products:
    type: datasource.static
    options:
      data:
        - id: 1
          image: https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=2599&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 2
          image: https://plus.unsplash.com/premium_photo-1676717962720-d9a812c8f8c9?q=80&w=2748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 3
          image: https://images.unsplash.com/photo-1568386453619-84c3ff4b43c5?q=80&w=2728&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 4
          image: https://images.unsplash.com/photo-1479064555552-3ef4979f8908?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 5
          image: https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?q=80&w=2193&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 6
          image: https://images.unsplash.com/photo-1593998066526-65fcab3021a2?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.section
    options:
      title: Carousel with card & pagination (outside)
      children:
        - type: component.carousel
          options:
            data: [email protected]
            item: 
              type: component.card
              options:
                children:
                  - type: component.image
                    options:
                      source:
                        uri: [email protected]
                color: color2
            pagination:
              position: outside
              isContained: false
        
  - type: component.section
    options:
      title: Carousel with image & pagination (inside)
      children:
        - type: component.carousel
          options:
            data: [email protected]
            item: 
              type: component.image
              options:
                source:
                  uri: [email protected]
            pagination:
              position: inside
              isContained: true

Carousel with counter

The carousel in this example uses Dynamic Data and a counter in the top right corner instead of pagination. The counter displays the number of items in the carousel and position of the current item. The example uses a composite jig to create a master detail jig, allowing you to tap on the image in the carousel and the corresponding detail is shown below.

Example: See the example in GitHub.

Carousel with counter
Carousel with counter
title: Carousel with counter
type: jig.default

outputs:
  output-key: [email protected]
    
children:
  - type: component.carousel
    options:  
      data: [email protected]
      item: 
        type: component.image
        options:
          source:
            uri: [email protected]
          title: [email protected]
          onPress: 
            type: action.set-state
            options:
              state: [email protected]
              value: [email protected]
      isContained: true
      pagination:
        isHidden: true
      counter:
        isHidden: false

Carousel with pagination (contained)

In this example there are two carousels:

  1. The first shows the pagination with isContained: true with position: inside the carousel.

  2. The second shows the pagination with isContained: true with position:outside the carousel.

Example: See the example in GitHub.

Carousel - pagination and contained
Pagination & contained
carousel-pagination-contained.jigx
title: Carousel with pagination (contained)
type: jig.default

datasources:
  models:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Model A
          price: $ 48000  
          image: https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=2566&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 2
          name: Model B
          price: $ 30000  
          image: https://images.unsplash.com/photo-1555353540-64580b51c258?q=80&w=2556&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 3
          name: Model c
          price: $ 27000   
          image: https://images.unsplash.com/photo-1502877338535-766e1452684a?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - id: 4
          name: Model D
          price: $ 15000  
          image: https://images.unsplash.com/photo-1522932467653-e48f79727abf?q=80&w=2630&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D    

children:
  - type: component.section
    options:
      title: Carousel with pagination contained (inside)
      children:
        - type: component.carousel
          options:
            data: [email protected]
            item: 
              type: component.image
              options:
                title: New Models
                subtitle: Power and luxury   
                source:
                  uri: [email protected]
            isContained: false
            pagination:
              isContained: true
              isHidden: false
              position: inside
                  
  - type: component.section
    options:
      title: Carousel with pagination contained (outside)
      children:
       - type: component.carousel
         options:
           data: [email protected]
           item: 
             type: component.card
             options:
               children:
                - type: component.image
                  options:
                    title: New Models
                    subtitle: Power and luxury 
                    source:
                      uri: [email protected]     
           pagination:
                isContained: true
                isHidden: false
                position: outside

Carousel with card containing avatars & entity-fields

The carousel in this example uses Dynamic Data with a colored card component. In the card component the avatar and entity-field components are configured.

Example: See the example in GitHub.

Carousel with card
Carousel with card
carousel-card-avatar.jigx
title: Carousel with avatars
type: jig.default

children:
  - type: component.carousel
    options:
      data: [email protected]
      item: 
        type: component.card
        options:
          children:
            - type: component.avatar
              options:
                title: [email protected]
                uri: [email protected]
                size: large
                align: center
            - type: component.entity
              options:
                children:
                  - type: component.field-row
                    options:
                      children:
                        - type: component.entity-field
                          options:
                            label: Name
                            value: [email protected]
                        - type: component.entity-field
                          options:
                            label: Position
                            value: [email protected]
                        - type: component.entity-field
                          options:
                            label: Status
                            value: [email protected]                       
          color: color3
      isContained: true
      pagination:
        position: outside
        isContained: true
PreviouscardNextcharts

Last updated

Was this helpful?