Change Fronts Slideshow to Image Carousel

[CDicksonG]

Background:

In our desire to bring parity between web and app, as well as addressing accessibility requirements, we want to amend the autoplaying photo slideshow on web/mobile web to function like a carousel.

Aim:

Redesigning the image carousel for web that eases pain points, increasing engagement and support editorial storytelling

User Story:

AS A Guardian website user I WANT to be able to control the image slideshow SO THAT I am in control of motion and animations on the page

AC:

• Colour of pip indicators to match Figma
• This slideshow will be populated as per usual in the fronts tool
• Scrolling dot behaviour from repo here to be used: https://github.com/Milad-Akarie/smooth_page_indicator (gif of style of animation attached)
• Pip indicators will only show the ‘small’ dot if more than 3 images are in the slideshow
• The pip indicator dots will not be clickable. The action will rely on scrolling and the navigation arrows only
• Image animated style: Slide Example, here: https://mobirise.com/bootstrap-carousel/fade-carousel.html#slider1-1k
• User can go back and forth between images, forward/backwards buttons will change state when at the beginning or end of carousel as per the designs.
• Captions to sit in bottom left corner
• Opacity overlay to enhance readability of text
• Captions to change and display correctly in relation to the visible image

Figma:

https://www.figma.com/design/NMEYESZ2PNMvA1Tziz9RzL/Image-carousel?node-id=3002-4157&t=47j0dlQ3ieiokTAl-4

### Tasks
- [ ] https://github.com/guardian/frontend/issues/27395

[shesah]

Let's discuss in planning