A collection of graphics (images) that can be added to a page for users to rotate through.

For phase 1 of the migration this is being implemented as a custom block.

• Display Name: Image Carousel
• Machine-readable Name: cgov_image_carousel

• Example: https://www.cancer.gov/types/skin/moles-fact-sheet
• Displays freeform crop of the image
• Display caption associated with the image. If no caption, leave blank.
• Display photo credit associated with image. If no credit, leave blank.

*Name (Block description) - in the common fields listing, this is referred to as Page Title (the H1). For media entities, Drupal calls this the 'Name' field and does not allow you to override the label unlike node.

• Field Name: field_carousel_image_title
• Label: Image Carousel Title
• Type: Text (plain)
• Required: No
• Tooltip Text: Optional title to display above the image carousel on the front end.
• Translatable: yes
• Cardinality: Unlimited

• Field Name: field_carousel_images
• Label: Images
• Type: Entity Reference
  • Allowed types:
    • Image
      • Note: Displays using article image style
    • Contextual Image
      • Note: Displays using article image style
• Required: Yes
• Tooltip Text: Select the images to include in the Image Carousel.
• Translatable: yes
• Cardinality: Unlimited

• https://www.cancer.gov/types/skin/moles-fact-sheet
• https://www.cancer.gov/espanol/tipos/piel/hoja-informativa-lunares
• https://www.cancer.gov/about-cancer/understanding/what-is-cancer (Fundamentals of Cancer)

• Image carousel will be centered and fill the columns at various breakpoints:
  • columns 6-10 at 1025px and >
  • columns 3-10 at 1024px - 769px
  • columns 2-11 at 768px - 641px
  • columns 1-12 at 640px and <
• Image carousel will display the ARTICLE crop of the global image or image translation
  • if an image is larger than the carousel container, the image will be resized to fit the carousel container (centered at full height, or full width of the carousel)
  • If an image is smaller than the carousel container, it will display the original size of the image, centered in the frame
• Each image in the carousel should display:
  • Caption (for every glo image/ translation image)
    • if no caption exists, do not show a caption
  • Photo Credit (for every glo image/translation image)
    • If no credit exists, do not show the credit
• The carousel should have a number that displays, letting users know how many images are in the carousel.
  • The first number should be the number of the photo the user is looking at in the carousel (e.g. 1/5, 2/5, 3/5...)
  • The second number should be the total number of photos in the carousel
• When the page loads, the carousel should always default to the first image in the carousel
  • The carousel will allow users to click arrows to navigate between the images
• When the user clicks the "right" arrow, the current image in the carousel will slide out to the left, and the next image will slide in from the right, allowing the user to advance through the carousel
• When the user clicks the "left" arrow, the current image slides out to the right, and the previous image slides in from the left.
• The carousel rotates on a loop:
• If the user is on the first image, and clicks left, the user will be able to go to the last image in the carousel
• If the user is on the last image, and clicks right, the user will be able to go to the first image in the carousel

• Name
• Carousel Title
• Images