Image Carousel

Overview

The Image Carousel component is designed to showcase a sequence of images in a dynamic, rotating fashion. It serves as an engaging visual element that enhances user interaction by displaying images one after another, either automatically or through user input. This component is versatile, allowing for the inclusion of various image types and supporting customization to fit the aesthetic and functional needs of your application.

Sample JSON

imageCarousel.json

{
    "type": "imageCarousel",
    "data": {
        "images": [
            "https://example.com/image1.jpg",
            "https://example.com/image2.jpg",
            "https://example.com/image3.jpg"
        ]
    },
    "style": {
        "imageHeight": 200,
        "imageWidth": 300,
        "cornerRadius": 10,
        "autoScroll": true,
        "autoScrollTimer": 2,
        "indicatorColor": "0000ff",
        "selectedIndicatorSize": 16,
        "unselectedIndicatorSize": 10,
        "indicatorOffset": 40,
        "carouselPadding": {
            "bottom": 0
        }
    }
}

This configuration creates an Image Carousel that cycles through a set of specified images. It is designed with custom dimensions, rounded corners for a sleek appearance, and auto-scroll functionality for dynamic interaction. Indicators provide visual cues for navigation within the carousel, and padding ensures the component is well-integrated into the surrounding UI.

Data Properties

The data properties define the content and behavior of the Image Carousel component. Below are the available data properties:

Property	Type	Description
images	[String]	An array of image URLs. These images are displayed in the carousel.

images

• Type: [String]
• Description: Specifies the URLs of the images to be included in the carousel. Each string in the array should be a valid URL pointing to an image resource.

Style Properties (Optional)

info

The style properties are optional. If you don't specify any style properties, the component will use the default values.

The following table outlines the available style properties for the Image Carousel component:

Property	Type	Platform	Required	Description
imageHeight	Float	android, iOS	false	Sets the height of the images within the carousel.
imageWidth	Float	android, iOS	false	Defines the width of the images within the carousel.
cornerRadius	Float	android, iOS	false	Specifies the radius of the corners for each image.
autoScroll	Bool	android, iOS	false	Enables automatic scrolling of images within the carousel.
autoScrollTimer	Float	android, iOS	false	Determines the interval time (in seconds) for automatic scrolling.
indicatorColor	String	android, iOS	false	Sets the color of the carousel index indicators.
selectedIndicatorSize	Int	android, iOS	false	Specifies the size of the selected index indicator.
unselectedIndicatorSize	Int	android, iOS	false	Defines the size of the unselected index indicators.
indicatorOffset	Int	android, iOS	false	Adjusts the position of the indicator relative to the images.
carouselPadding	JSON	android, iOS	false	Provides padding around the carousel component.

Here are detailed explanations for each of the style properties listed for the Image Carousel component:

imageHeight

• Type: Float (optional)
• Description: This property sets the vertical size of the images displayed within the carousel. Specified in density-independent pixels (dp), it ensures that all images in the carousel have a uniform height, contributing to a cohesive visual appearance.

imageWidth

• Type: Float (optional)
• Description: Similar to imageHeight, this property defines the horizontal size of the images. Specifying the width in dp helps maintain consistent image dimensions across devices, ensuring that the carousel looks uniform and well-integrated in any layout.

cornerRadius

• Type: Float (optional)
• Description: This property allows for the customization of the corner radius for each image in the carousel. A higher value results in more rounded corners, offering a softer and potentially more aesthetically pleasing appearance to the images. It's specified in dp to ensure consistency across different screen densities.

autoScroll

• Type: Bool (optional)
• Description: When enabled, this boolean property allows the carousel to automatically cycle through its images without user intervention. This feature enhances the dynamic nature of the carousel, making it an active element within the UI that can capture and retain user attention.

autoScrollTimer

• Type: Float (optional)
• Description: This property works in conjunction with autoScroll, determining the duration each image is displayed before the carousel transitions to the next image. The time is specified in seconds, allowing for precise control over the viewing experience and pacing of the image rotation.

indicatorColor

• Type: String (optional)
• Description: Defines the color of the carousel's index indicators, which highlight the current position within the sequence of images. The color should be specified as a hexadecimal value (e.g., "#0000FF" for blue), enabling easy integration with the application's color scheme and enhancing visual clarity for navigation.

selectedIndicatorSize

• Type: Int (optional)
• Description: Specifies the size of the indicator for the currently active or selected image within the carousel. This size enhancement helps users easily identify which image is being viewed. The size is specified in dp, ensuring that the indicator is appropriately scaled across different screen densities.

unselectedIndicatorSize

• Type: Int (optional)
• Description: Determines the size of the indicators corresponding to the unselected images in the carousel. Typically smaller than the selectedIndicatorSize, it visually differentiates the current image from the others. Specifying this in dp maintains uniformity in appearance across devices.

indicatorOffset

• Type: Int (optional)
• Description: Adjusts the vertical position of the indicator bar relative to the images, specified in dp. This property allows for fine-tuning the placement of the indicators, ensuring they are positioned in a way that complements the overall design of the carousel and does not obstruct important parts of the images.

carouselPadding

• Type: JSON (optional)
• Description: Provides the ability to specify padding around the entire carousel component. This padding is defined using a JSON object with properties for top, right, bottom, and left, each specified in dp. This allows for precise control over the spacing between the carousel and other UI elements, ensuring that the carousel is well-integrated into the overall design and layout of the page.

Each of these style properties allows for extensive customization of the Image Carousel component, ensuring it can be tailored to fit the specific design and functional requirements of your application.