Configuration
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
Background colour
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
Background colour @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
Last updated
