Carouselv1

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

Using Core Components

Adobe Help Center

Examples

Image Slides

Carousel with three image components as child items.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544120652466,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=6,DAY_OF_YEAR=340,DAY_OF_WEEK=5,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=7,HOUR_OF_DAY=19,MINUTE=24,SECOND=12,MILLISECOND=466,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        autopauseDisabled:
        false
    
    6. 

  6. 
        delay:
        5000
    
    7. 

  7. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1547557952561,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=2,HOUR_OF_DAY=14,MINUTE=12,SECOND=32,MILLISECOND=561,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    8. 

  8. 
        sling:resourceType:
        core/wcm/components/carousel/v1/carousel
    
    9. 

  9. 
        autoplay:
        false
    
    10. 




    
        

    


    

    


    JSON

Teaser Slides

Carousel with three teaser components as child items.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544120652466,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=6,DAY_OF_YEAR=340,DAY_OF_WEEK=5,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=7,HOUR_OF_DAY=19,MINUTE=24,SECOND=12,MILLISECOND=466,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        autopauseDisabled:
        false
    
    6. 

  6. 
        delay:
        5000
    
    7. 

  7. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1548160668966,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=4,WEEK_OF_MONTH=4,DAY_OF_MONTH=22,DAY_OF_YEAR=22,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=4,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=37,SECOND=48,MILLISECOND=966,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    8. 

  8. 
        sling:resourceType:
        core/wcm/components/carousel/v1/carousel
    
    9. 

  9. 
        autoplay:
        false
    
    10. 




    
        

    


    

    


    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. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544120652466,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=6,DAY_OF_YEAR=340,DAY_OF_WEEK=5,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=7,HOUR_OF_DAY=19,MINUTE=24,SECOND=12,MILLISECOND=466,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        autopauseDisabled:
        false
    
    6. 

  6. 
        delay:
        5000
    
    7. 

  7. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1547496638710,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=14,DAY_OF_YEAR=14,DAY_OF_WEEK=2,DAY_OF_WEEK_IN_MONTH=2,AM_PM=1,HOUR=9,HOUR_OF_DAY=21,MINUTE=10,SECOND=38,MILLISECOND=710,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    8. 

  8. 
        sling:resourceType:
        core/wcm/components/carousel/v1/carousel
    
    9. 

  9. 
        autoplay:
        true
    
    10. 




    
        

    


    

    


    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. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544121189274,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=6,DAY_OF_YEAR=340,DAY_OF_WEEK=5,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=7,HOUR_OF_DAY=19,MINUTE=33,SECOND=9,MILLISECOND=274,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        autopauseDisabled:
        true
    
    6. 

  6. 
        delay:
        5000
    
    7. 

  7. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1547496654093,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=14,DAY_OF_YEAR=14,DAY_OF_WEEK=2,DAY_OF_WEEK_IN_MONTH=2,AM_PM=1,HOUR=9,HOUR_OF_DAY=21,MINUTE=10,SECOND=54,MILLISECOND=93,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    8. 

  8. 
        sling:resourceType:
        core/wcm/components/carousel/v1/carousel
    
    9. 

  9. 
        autoplay:
        true
    
    10. 




    
        

    


    

    


    JSON

Built with Core Components 2.3.0.