As editors we see a need to a simple image carousel component to communicate a image story or timeline

[NickHaggerty1]

Acceptance criteria

1. Editor can add images (with same upload settings as Image component - fotoware/upload etc)
2. Size should display 2:1 same as default banner on topic page
3. Editor can add SVGs
4. Editor can Crop/hotspot on images
5. Editor can add optional image text per image added in same style as image component
6. Carousel should auto rotate, editor can set transition speed in seconds
7. Carousel should also have options for users to click through.
8. Carousel should indicate amount of transitions for user
9. Optional title for component (Not per transition)
10. Options on colour background as per other components
11. Component should be available for use on Magazine and topic templates

[NickHaggerty1]

@meols fyi, and please add any acceptance criteria

[meols]

Looks good @NickHaggerty1 - nothing to add 😄

[fernandolucchesi]

#1313

[NickHaggerty1]

I have made some sketches in Figma. The page TOP BANNER has a carousel ++ artboard. Im open for input in how best to solve the scroll left and right and display how many options there are. I have some different design options. We have to consider that the same functionality needs to be applied to horizontal scroll on promotion components etc too ref #1373. I suggest we take a meeting on this before the developers start this issue, just to clarify. Let me know when that could happen

[SvSven]

Will be partially solved in #1373

[NickHaggerty1]

For design of left and right arrows @SvSven will use the examples in TOP BANNER on figma as a basis and we will look at options to confirm the design once in Sanity.
We will go for a number indicator display to tell user which slide they are on and how many..... 1 / 6 for example

[NickHaggerty1]

[SvSven]

Some work here was done alongside #1373 - however there are some differences between the 2 components. We can (and should) use the same library for both solutions: https://swiperjs.com/swiper-api

Examples of some customization/implementation can be found in the horizontal scroll component for #1373

[SvSven]

@fernandolucchesi @millianapia @padms This is ready for technical review

[millianapia]

added a few comments, but looks very good otherwise!

[SvSven]

Actually forgot to make the autoplay dependent on the chosen value in Sanity - should be fixed now 😅

[NickHaggerty1]

@fernandolucchesi @meols @SvSven. I say approved!