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. delay: 5000
  3. sling:resourceType: core-components-examples/components/carousel
  4. autoplay: false
    
        

    

    

    

Teaser Slides

Carousel with three teaser components as child items.

  1. autopauseDisabled: false
  2. delay: 5000
  3. sling:resourceType: core-components-examples/components/carousel
  4. autoplay: false

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. delay: 5000
  3. sling:resourceType: core-components-examples/components/carousel
  4. autoplay: true
    
        

    

    

    

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. delay: 5000
  3. sling:resourceType: core-components-examples/components/carousel
  4. autoplay: true
    
        

    

    

    

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. activeItem: image_1321018784
    
        

    

    

    

Deep Linking

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