Carouselv1

Carousel allows a user to cycle through content panels. Slides of varying component type can be created.

Examples

Image Slides

Carousel with three image components as child items.

    
    

    
  1. 
        autopauseDisabled:
        false
    
    2. 

    
  2. 
        delay:
        5000
    
    3. 

    
  3. 
        sling:resourceType:
        core-components-examples/components/carousel
    
    4. 

    
  4. 
        autoplay:
        false
    
    5. 



    
        

    





    

    


    JSON

Teaser Slides

Carousel with three teaser components as child items.

    
    

    
  1. 
        autopauseDisabled:
        false
    
    2. 

    
  2. 
        delay:
        5000
    
    3. 

    
  3. 
        sling:resourceType:
        core-components-examples/components/carousel
    
    4. 

    
  4. 
        autoplay:
        false
    
    5. 



    
        

    





    

    


    JSON

Automatic Transitioning

Automatic transitioning of slides can be enabled. The delay before transitioning to the next slide is also configurable. Pause and play buttons are displayed which allow stopping / continuing slide rotation.

    
    

    
  1. 
        autopauseDisabled:
        false
    
    2. 

    
  2. 
        delay:
        5000
    
    3. 

    
  3. 
        sling:resourceType:
        core-components-examples/components/carousel
    
    4. 

    
  4. 
        autoplay:
        true
    
    5. 



    
        

    





    

    


    JSON

Auto-pause on Hover Disabled

The default behavior is to pause when hovering the carousel, and automatic transitioning is enabled. This can be disabled, which may be useful for certain use cases, such as a full screen carousel.

    
    

    
  1. 
        autopauseDisabled:
        true
    
    2. 

    
  2. 
        delay:
        5000
    
    3. 

    
  3. 
        sling:resourceType:
        core-components-examples/components/carousel
    
    4. 

    
  4. 
        autoplay:
        true
    
    5. 



    
        

    





    

    


    JSON

Default Active Item

Carousel with three images with the default active item being the second image.

    
    

    
  1. 
        sling:resourceType:
        core-components-examples/components/carousel
    
    2. 

    
  2. 
        activeItem:
        image_1321018784
    
    3. 



    
        

    





    

    


    JSON

Deep Linking

Linking to a carousel item displays the item and scrolls to it.

Link to a carousel item ID (same browser tab).
Link to an ID within a carousel item (same browser tab).
Link to a carousel item ID (new browser tab).
Link to an ID within a carousel item (new browser tab).

Built with Core Components 2.27.0.