Component Request - Slider - 20ish hrs - week

[farosFreed]

Component Description

This component is used on the FTVA homepage to display a Before/After slider at the bottom of the page.

It takes 2 images and overlays them with a slider like so: https://codepen.io/Coding-in-Public/pen/NWyjZwO

The slider will be part of a carousel, so the component should work as a child of ScrollWrapper.vue & include a story showing this

Design

Please also see attached screenshots for quick reference.

• Figma: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=1406-9524&t=9xToAfepQb1HgFgE-0

Slots

No slots needed.

Props

props: {
    beforeImage: {
        type: Object,
        default: () => {}
    },
    afterImage: {
        type: Object,
        default: () => {}
    },
  // might be better to implement in ScrollWrapper ?
    caption: {
        type: Object,
        default: () => {}
    },
}

Developer Tips

1. For the parent carousel component, test using ScrollWrapper.vue. Can it be modified to cleanly page between items? Or do we need to use our carousel component instead?
2. While considering item 1, think of how you will implement the caption in either case. Can it work both ways? Is it easier with carousel since it already exists? Create stories to test before committing to a plan.
3. The blue arrows can stay the same for desktop and mobile
4. The craft CMS data for the slider looks like:

"beforeAfterImageCarousel": [
        {
          "id": "4073994",
          "beforeImage": [
            {
              "id": "4073988",
              "src": "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/paris_1895.jpg",
              "height": 1878,
              "width": 2560,
              "srcset": "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/paris_1895.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/paris_1895.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/paris_1895.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/paris_1895.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/paris_1895.jpg 2560w",
              "alt": null,
              "focalPoint": [
                0.5,
                0.5
              ]
            }
          ],
          "afterImage": [
            {
              "id": "4073990",
              "src": "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/paris_2013.jpg",
              "height": 1878,
              "width": 2560,
              "srcset": "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/paris_2013.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/paris_2013.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/paris_2013.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/paris_2013.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/paris_2013.jpg 2560w",
              "alt": null,
              "focalPoint": [
                0.5,
                0.5
              ]
            }
          ],
          "caption": "Paris"
        }

Child components

• Consider usage of ResponsiveImage component to display before/after images.

Screenshots