Arrow navigation
Layout type
Field type:
Select
Available values:
• Rectangle (default)
• Square/Circle
Example value:Rectangle (default)
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-style
In the "Shopping Experiences" tab, you can individually configure various sliders.
Corner type
Field type:
Select
Available values:
• not rounded
• rounded corners (default)
• round corners
Example value:rounded corners (default)
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-corner-type
rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Uses a predefined radius for round corners.
Hover effect
Field type:
Select
Available values:
• no effect (default)
• fade in
Example value:fade in
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-hover-type
Text colour
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-color
Border colour
Field type:
Color picker
Example value:transparent
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-border-color
Background colour
Field type:
Color picker
Example value:transparent
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-background-color
Text colour @hover
Field type:
Color picker
Example value:$sw-color-brand-secondary
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-color-hover
Border colour @hover
Field type:
Color picker
Example value:darken($twt-base-slider-controls-border-color, 10%)
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-border-color-hover
Background colour @hover
Field type:
Color picker
Example value:darken($twt-base-slider-controls-background-color, 7.5%)
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Arrow navigation"
Technical name:twt-base-slider-controls-background-color-hover
Dots navigation
Layout type
Field type:
Select
Available values:
• Rectangle
• Square/Circle (default)
Example value:Square/Circle (default)
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:twt-base-slider-navigation-dots-style
Corner type
Field type:
Select
Available values:
• not rounded
• rounded corners
• round corners (default)
Example value:round corners (default)
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:twt-base-slider-navigation-dots-type
rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Uses a predefined radius for round corners.
Hover effect
Field type:
Select
Available values:
• default
• scale up
• stroke
• fill in
• dot stroke
Example value:default
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:twt-base-slider-navigation-dots-hover-type
Horizontal alignment
Field type:
Select
Available values:
• align left
• align right
• align center (default)
Example value:align center (default)
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:twt-base-slider-navigation-dots-alignment
Colour (Primary)
Field type:
Color picker
Example value:#bcc1c7
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:twt-base-slider-navigation-dots-background-color
Colour (Secondary) @active/hover
Field type:
Color picker
Example value:#798490
Path to the configuration:
Tab "Content" => Block "Sliders" => Section "Dots navigation"
Technical name:twt-base-slider-navigation-dots-background-color-active