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.
Arrow navigation (Individual styling)
Layout type
Field type:
Select
Available values:
• Rectangle (default)
• Square/Circle
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.
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