Photo Slider¶
Use photo_slider module to insert a photo slider with photos provided and chosen by the user. This module has three different visual variants which are listed below.
Configuration parameters¶
variant¶
default | minimal | multiple Sets the visual variant of the slider.
default - display single slide with small fragments of previous and next slide, under the slide there is a progress bar and the number of currently shown slide
minimal - display single slide without fragments of previous or next slide, under the slide there is a progress bar
multiple - display multiple photos on single slide, depends on the screen width, on the largest screen size there are 4 photos with fragments of previous and next slide, and by reducing the screen size we will see three, two or one photo per slide, under the slides there is a progress bar and the number of currently shown slide
showNavigation¶
int if set to 1 the arrow navigation will be enabled.
autoplay¶
int if set to 1 auto changing of the slides will be enabled
slideDisplayTime¶
int Allows to set (in milliseconds) how long should one slide be displayed before change. By default, this value is set to 5000 milliseconds
scrollingDuration¶
int Allows to set (in milliseconds) how long should sliding animation last. By default, this value is set to 400 milliseconds
classNames¶
string (optional) represents a string containing additional classNames that will be appended to the module.
images¶
images parameter represents an array of objects consisting of the following properties:
labelstring type, represents the label text of the slidedescriptionstring type, represents the description text of the slideactiveintif set to 1 the slide will be displayedurlstring type, represents the url path of page where user will be redirected after clicking on this slidealtstring type, represents the alt attribute of the imageorderinttype, represents the order in which the images wil be rendered from the smallest number to the largestimagerepresents an object with the following properties:idstring type, represents the unique id of the imagewidthfloat type, represents the width of the imageheightfloat type, represents the height of the imagefile_namestring type, represents the name of the image fileuploaded_filestring type, represents the name of the uploaded image file
Module source code¶
{% from "@macros/photo_slider.twig" import photo_slider %}
{% set moduleInstanceId = 'photo-slider-' ~ moduleInstance %}
{%
set defaultSliderSettings = {
"mountOnConnectedCallback": true,
"type": "loop",
"perPage": 1,
"perMove": 1,
"arrows": moduleConfig.showNavigation == "1",
"pagination": false,
"autoplay": moduleConfig.autoplay == "1",
"interval": moduleConfig.slideDisplayTime ? moduleConfig.slideDisplayTime|number_format * 1000 : 5000,
"speed": moduleConfig.scrollingDuration ? moduleConfig.scrollingDuration|number_format * 1000 : 400,
"keyboard": true,
"gap": "1rem",
"mediaQuery": "min",
"breakpoints": {
768: {
"padding": "5.25rem"
}
}
}
%}
{%
set minimalSliderSettings = {
"mountOnConnectedCallback": true,
"type": "loop",
"perPage": 1,
"perMove": 1,
"arrows": moduleConfig.showNavigation == "1",
"pagination": false,
"autoplay": moduleConfig.autoplay == "1",
"interval": moduleConfig.slideDisplayTime ? moduleConfig.slideDisplayTime|number_format * 1000 : 5000,
"speed": moduleConfig.scrollingDuration ? moduleConfig.scrollingDuration|number_format * 1000 : 400,
"keyboard": true,
}
%}
{%
set multipleSliderSettings = {
"mountOnConnectedCallback": true,
"type": "loop",
"perPage": 1,
"perMove": 1,
"arrows": moduleConfig.showNavigation == "1",
"pagination": false,
"autoplay": moduleConfig.autoplay == "1",
"interval": moduleConfig.slideDisplayTime ? moduleConfig.slideDisplayTime|number_format * 1000 : 5000,
"speed": moduleConfig.scrollingDuration ? moduleConfig.scrollingDuration|number_format * 1000 : 400,
"keyboard": true,
"padding": "2.5rem",
"gap": "0.5rem",
"mediaQuery": "min",
"breakpoints": {
768: {
"padding": "5.25rem",
"perPage": 2,
"gap": "1rem"
},
1200: {
"perPage": 3
},
1920: {
"perPage": 4
}
}
}
%}
{%
set multipleSlideSliderSettings = multipleSliderSettings|merge({
"type": "slide",
"arrows": false,
"autoplay": false
})
%}
{% if moduleConfig.variant == "one_slide_minimalistic" %}
{% set variantSettings = minimalSliderSettings %}
{% elseif moduleConfig.variant == "multiple_slides" %}
{% set variantSettings = multipleSliderSettings %}
{% else %}
{% set variantSettings = defaultSliderSettings %}
{% endif %}
{% if moduleConfig.images|length %}
{% if moduleConfig.variant == "multiple_slides" and moduleConfig.images|length < 5 %}
<div class="
{% if moduleConfig.images|length == 4 %}hidden-xs-only hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only{% endif %}
{% if moduleConfig.images|length == 3 %}hidden-xs-only hidden-sm-only hidden-md-only hidden-lg-only{% endif %}
{% if moduleConfig.images|length == 2 %}hidden-xs-only hidden-sm-only{% endif %}
">
{{ photo_slider(multipleSlideSliderSettings, moduleConfig|merge({
moduleInstanceId: moduleInstanceId ~ '-slide',
showNavigation: ""
})) }}
</div>
{% endif %}
{% if moduleConfig.variant == "multiple_slides" %}
<div class="
{% if moduleConfig.images|length <= 4 %}hidden-xxxl-only{% endif %}
{% if moduleConfig.images|length <= 3 %}hidden-xl-only hidden-xxl-only{% endif %}
{% if moduleConfig.images|length <= 2 %}hidden-md-only hidden-lg-only{% endif %}
{% if moduleConfig.images|length == 1 %}hidden-xs-only hidden-sm-only{% endif %}
">
{% endif %}
{{ photo_slider(variantSettings, moduleConfig|merge({ moduleInstanceId })) }}
{% if moduleConfig.variant == "multiple_slides" %}
</div>
{% endif %}
{% endif %}
Macros reference¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "Slides",
"elements": [
{
"type": "imageList",
"name": "images",
"supportsTranslations": 1,
"options": {
"newItemTitle": "Add a slide",
"allowedExtensions": ["jpg", "jpeg", "png", "webp", "svg", "gif"],
"requireImageSize": 1
}
}
]
},
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "select",
"name": "variant",
"label": "Carousel style",
"defaultValue": "default",
"options": {
"isWithSearch" : 0,
"selectOptions": [
{ "key": "default", "label": "One slide" },
{ "key": "one_slide_minimalistic", "label": "One slide (minimalistic)" },
{ "key": "multiple_slides", "label": "Multiple slides" }
]
}
},
{
"type": "text",
"name": "title",
"supportsTranslations": 1,
"label": "Module title"
},
{
"type": "checkbox",
"name": "showNavigation",
"label": "Show navigation (recommended)",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "autoplay",
"label": "Auto-scroll (not recommended)",
"defaultValue": 0,
"hint": "Most customers prefer content that can be viewed at their own pace and ignore content that is automatically animated.",
"children": [
{
"type": "number",
"name": "scrollingDuration",
"label": "The duration of the scrolling animation",
"isRequired": 1,
"defaultValue": 1,
"options": { "postfix": "seconds" },
"validators": [{ "type": "positiveNumber" }, { "type": "int" }],
"relations": [
{
"parentName": "autoplay",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "number",
"name": "slideDisplayTime",
"label": "Time to display one slide",
"labelDescription": "Min. 3 seconds",
"isRequired": 1,
"defaultValue": 5,
"options": { "postfix": "seconds" },
"validators": [{ "type": "positiveNumber" }, { "type": "int" }, { "type": "greaterEqThan", "options": { "min": 3 } }],
"relations": [
{
"parentName": "autoplay",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
}
]
},
{
"state": "unfolded",
"label": "CSS",
"elements": [
{
"type": "text",
"name": "classNames",
"label": "CSS class",
"labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
}
]
}
]