Breadcrumb

    About

    Show off one sub region at a time. For example, displaying a report and a chart, a slideshow, or different views of the same data.

    Set Carousel Container as Region Template.

    Examples

    1. Default

    Carousel Region

    Region A

    Region B

    Region C

    Region Template Options

    • Use DefaultYes
    • Advanced Body OverflowHide

    2. Spin and Cycle

    Carousel Region

    Region A

    Region B

    Region C

    Region Template Options

    • Use DefaultNo
    • AnimationSpin
    • Timer5 Seconds
    • Advanced Body OverflowHide

    3. Remember Slide

    Carousel Region

    Region A

    Region B

    Region C

    Region Template Options

    • Use DefaultYes
    • Remember Carousel SlideYes
    • Advanced Body OverflowHide

    Template Options

    • General

      • Remove Body Padding
        Removes padding from region body.
      • Remember Carousel Slide
      • Show Next and Previous Buttons
      • Show Maximize Button
        Displays a button in the Region Header to maximize the region. Clicking this button will toggle the maximize state and stretch the region to fill the screen.
      • Show Region Icon
        Displays the region icon in the region header beside the region title

    • Timer

      Sets the timer for when to automatically navigate to the next region within the Carousel Region.

      • No Timer
      • 5 Seconds
      • 10 Seconds
      • 15 Seconds
      • 20 Seconds

    • Animation

      Sets the animation when navigating within the Carousel Region.

      • Fade
      • Slide
      • Spin

    • Body Height

      Sets the Region Body height. You can also specify a custom height by modifying the Region's CSS Classes and using the height helper classes "i-hXXX" where XXX is any increment of 10 from 100 to 800.

      • Auto - Default
      • 240px
        Sets region body height to 240px.
      • 320px
        Sets region body height to 320px.
      • 480px
      • 640px

    • Header

      Determines the display of the Region Header which also contains the Region Title.

      • Visible - Default
      • Hidden
      • Hidden but accessible
        This option will hide the region header. Note that the region title will still be audible for Screen Readers. Buttons placed in the region header will be hidden and inaccessible.

    • Accent

      Set the Region's accent. This accent corresponds to a Theme-Rollable color and sets the background of the Region's Header.

      • Default
      • Accent 1
      • Accent 2
      • Accent 3
      • Accent 4
      • Accent 5

    • Style

      Determines how the region is styled. Use the "Remove Borders" template option to remove the region's borders and shadows.

      • Default
      • Remove Borders
        Removes borders from the region.
      • Stack Region
        Removes side borders and shadows, and can be useful for accordions and regions that need to be grouped together vertically.
    • Advanced

      Body Overflow

      Determines the scroll behavior when the region contents are larger than their container.

      • Hide
      • Scroll
    • Advanced

      Item Padding

      Sets the padding around items within this region.

      • Default
      • Slim Padding
        Reduces form item padding to 4px.
      • Remove Padding
        Removes padding between items.
    • Advanced

      Item Size

      Sets the size of the form items within this region.

      • Default
      • Large
      • X Large
    • Advanced

      Item Width

      Sets the width of the form items within this region.

      • Default
      • Stretch Form Fields
    • Advanced

      Label Alignment

      Set the label text alignment for items within this region.

      • Right
      • Left
        Align form labels to left.
    • Advanced

      Label Position

      Sets the position of the label relative to the form item.

      • Inline - Default
      • Show Form Labels Above
        Show form labels above input fields.
    • Advanced

      Top Margin

      Set the top margin for this region.

      • Default
      • None
        Removes the top margin for this region.
      • Small
        Adds a small top margin to the region.
      • Medium
        Adds a medium top margin to the region.
      • Large
        Adds a large top margin to the region.
    • Advanced

      Bottom Margin

      Set the bottom margin for this region.

      • Default
      • None
        Removes the bottom margin for this region.
      • Small
        Adds a small bottom margin to the region.
      • Medium
        Adds a medium bottom margin to the region.
      • Large
        Adds a large bottom margin to the region.
    • Advanced

      Left Margin

      Set the left margin for this region.

      • Default
      • None
        Removes the left margin from the region.
      • Small
        Adds a small left margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.
    • Advanced

      Right Margin

      Set the right margin for this region.

      • Default
      • None
        Removes the right margin from the region.
      • Small
        Adds a small right margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.

    Button Positions

    Carousel Region with Buttons

    Region A

    Region B

    Region C