Change Fronts Slideshow to Image Carousel
CDicksonG opened this issue · 1 comments
CDicksonG commented
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:
shesah commented
Let's discuss in planning