Configuration
Individual styling
Field type: Select
Available values: • don't use (default) • use individual styling
Example value:
don't use (default)
Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")"
Technical name:
twt-image-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 slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-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 slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-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 "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-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 slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-slider-controls-color
Border colour
Field type: Color picker
Example value:
transparent
Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-slider-controls-border-color
Background colour
Field type: Color picker
Example value:
transparent
Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-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 slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-slider-controls-color-hover
Border colour @hover
Field type: Color picker
Example value:
darken($twt-image-slider-controls-border-color, 10%)
Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-slider-controls-border-color-hover
Background colour @hover
Field type: Color picker
Example value:
darken($twt-image-slider-controls-background-color, 7.5%)
Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"
Technical name:
twt-image-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 slider (Category "Images")" => Section "Dots navigation (Individual styling)"
Technical name:
twt-image-slider-navigation-dots-alignment
Last updated
