Individual styling
Field type:
Select
Available values:
• don't use (default)
• use individual styling
Example value:use individual styling
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")"
Technical name:twt-gallery-slider-controls-individual
In the tab "Content" you can configure all sliders globally, see Sliders.
Arrow navigation (Individual styling)
Layout type
Field type:
Select
Available values:
• Rectangle (default)
• Square/Circle
• Arrow (no area)
Example value:Rectangle (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-style
Corner type
Field type:
Select
Available values:
• not rounded
• rounded corners (default)
• round corners
Example value:rounded corners (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-corner-type
rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Uses a predefined radius for round corners.
Shadow
Field type:
Select
Available values:
• none (default)
• subtle
• strong
Example value:none (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category 'Images')" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-shadow
Shadow of the navigation arrows, one step stronger on hover. Has no effect with the layout type "Arrow (no area)".
Hover effect
Field type:
Select
Available values:
• no effect (default)
• fade in
Example value:no effect (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-hover-type
Text colour
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-color
Border colour
Field type:
Color picker
Example value:transparent
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-border-color
Background colour
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-background-color
Text colour @hover
Field type:
Color picker
Example value:$sw-color-brand-secondary
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-color-hover
Border colour @hover
Field type:
Color picker
Example value:darken($twt-gallery-slider-controls-border-color, 10%)
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-border-color-hover
Background colour @hover
Field type:
Color picker
Example value:darken($twt-gallery-slider-controls-background-color, 7.5%)
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:twt-gallery-slider-controls-background-color-hover
Dots navigation (Individual styling)
Horizontal alignment
Field type:
Select
Available values:
• align left
• align right
• align center (default)
Example value:align center (default)
Path to the configuration:
Tab "Shopping Experiences" => Block "Image gallery (Category "Images")" => Section "Dots navigation (Individual styling)"
Technical name:twt-gallery-slider-navigation-dots-alignment