Story 1. Main page top slider

01

Given: page https://fuji.ch and see scroll sections

When: open the editor of the page
AND set the slider block for a top place under the menu
AND Title (big text) – mandatory (by default “Text title“)
AND Text (small text) – not mandatory
AND Text button – mandatory (by default “Text button“)
AND link on a button – mandatory (by default – #)

Then: see the slider on the page Fullscreen width and height on mobile and desktop

02

Given: page https://fuji.ch

When: open the editor of the page
AND add the photo for desktop
AND add the photo for mobile (375 px – 767px)

Then: see different photos on the front pages for desktop and mobile

03

Given: page https://fuji.ch

When: wait 5 seconds

Then: see the animation and switching to a second image of the slider

Slide should change automatically every 5 seconds.

04

Given: page https://fuji.ch on desktop

When: click right arrow

Then: slider smoothly fade down (as in Figma)

05

Given: page https://fuji.ch on desktop

When: click left arrow

Then: slider smoothly fade up (as in Figma)

06

Given: slider

When: click arrows left or right

Then: see the current slide according to the dots

07

Given: page https://fuji.ch

When: click edit page
AND change the Title color
AND change the Text color

Then: see new color on the front end page
AND the color is changed for both desktop and mobile (the same color for both)

08

Given: slider on a page

When: setup in admin panel Title, Text, Button

Then: text is always have the same start vertical position (no matter it is short or long)
AND Title attached to a text from the top position
AND Button attached to a text from the bottom position

09

Given: slider on a page

When: setup in admin panel ONLY Title and Button (without text)

Then: instead small Text user see a button

10

Given: slider on a page (mobile) without arrows as on desktop

When: swipe to the left or to the right
OR click on one of the dots bottom

Then: see basic slide change (not as on desktop)

11

Given: page https://fuji.ch

When: click edit page
AND change the size of Text for desktop
AND change the size of Text for mobile

Then: see new size of text on the front end page

12

Given: page https://fuji.ch

When: click edit page
AND change the size of Title for desktop
AND change the size of Title for mobile

Then: see new size of Title on the front end page

13

Given: page https://fuji.ch

When: click edit page
AND change the alignment (left, center, right) of the text, Title and button for desktop
AND change the alignment (left, center, right) of the text, Title and button for mobile

Then: see new alignment on the front end page