I’ve tried a couple methods and have now downloaded and added the following assets:
{{ ‘swiper-bundle.min.css’ | asset_url | stylesheet_tag }}
{{ ‘swiper-bundle.min.js’ | asset_url | script_tag }}
although I’m a below amateur coder, how/where do I add this to the “slideshow.liquid” to allow swipe on mobile?
is there a better way to do this?
Hi @dipiev1399 ,
Please send the website link, I will check it for you
Hi @dipiev1399 ,
Please go to slideshow.liquid file, find ‘data-draggable’ and change code here:
Code:
data-draggable="true"
ok thank you!
there was an if then statement but I removed that so its now always true.
saved and re tried but the slideshow still doesn’t swipe in mobile
any other recommendations?
Hi @dipiev1399 ,
Can I send you a collaborator invitation? I will check and change it for you
yes that would work for me
Hi @dipiev1399 ,
Please send me the collaborator code in private message, I will send you the invitation and check it
Hi @dipiev1399 ,
Please go to slideshow.liquid file and change all code:
{{ 'section-slideshow.min.css' | asset_url | stylesheet_tag }}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% comment %} We need a separate forloop for the block styles, since we can't include style tags within the swiper-wrapper element (Swiper breaks) {% endcomment %}
{% assign slider-text-color = block.settings.caption-text %}
{% endfor %}
{% for block in section.blocks %}
{%- assign slide_is_link = false -%}
{% if block.settings.first_button_link != blank %}
{%- assign slide_is_link = true -%}
{% endif %}
{% if block.settings.image == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{% assign placeholder_image_classes = 'icon icon--placeholder icon--placeholder--subdued' %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: placeholder_image_classes | replace: '
{% endfor %}
{% case section.settings.slide_navigation_style %}
{% when 'arrows' %}
{% render 'theme-icon' with icon: 'chevron_left', iconWidth: 24, iconHeight: 24, iconColor: 'currentColor' %}
{% render 'theme-icon' with icon: 'chevron_right', iconWidth: 24, iconHeight: 24, iconColor: 'currentColor' %}
{% when 'bars' %}
{% when 'dots' %}
{% endcase %}
{% endif %}
{% if section.blocks.size == 0 %}
{{ 'general.onboarding.no_content' | t }}
{% endif %}
{% schema %}
{
"name": "t:sections.image--slideshow.name",
"class": "section--slideshow-wrapper",
"max_blocks": 12,
"settings": [
{
"type": "range",
"id": "slide_transition_delay",
"min": 5,
"max": 10,
"step": 1,
"unit": "t:all.sec",
"label": "t:sections.image--slideshow.settings.slide_transition_delay.label",
"default": 7
},
{
"type": "header",
"content": "t:all.Layout"
},
{
"type": "radio",
"id": "slide_navigation_style",
"label": "t:sections.image--slideshow.settings.slide_navigation_style.label",
"options": [
{
"value": "none",
"label": "t:all.None"
},
{
"value": "arrows",
"label": "t:sections.image--slideshow.settings.slide_navigation_style.options.arrows"
},
{
"value": "bars",
"label": "t:sections.image--slideshow.settings.slide_navigation_style.options.bars"
},
{
"value": "dots",
"label": "t:sections.image--slideshow.settings.slide_navigation_style.options.dots"
}
],
"default": "bars"
},
{
"type": "range",
"id": "section_padding_top",
"label": "t:all.Spacing_top",
"min": 0,
"max": 150,
"step": 5,
"unit": "t:all.px",
"default": 0
},
{
"type": "range",
"id": "section_padding_bottom",
"label": "t:all.Spacing_bottom",
"min": 0,
"max": 150,
"step": 5,
"unit": "t:all.px",
"default": 0
},
{
"type": "select",
"id": "desktop_height",
"label": "t:sections.image--slideshow.settings.desktop_height.label",
"options": [
{
"value": "original",
"label": "t:all.Original"
},
{
"value": "small",
"label": "t:all.Small"
},
{
"value": "medium",
"label": "t:all.Medium"
},
{
"value": "large",
"label": "t:all.Large"
},
{
"value": "extra_large",
"label": "t:all.Extra_large"
},
{
"value": "full_screen",
"label": "t:all.Full_screen"
}
],
"default": "full_screen"
},
{
"type": "select",
"id": "mobile_height",
"label": "t:sections.image--slideshow.settings.mobile_height.label",
"options": [
{
"value": "original",
"label": "t:all.Original"
},
{
"value": "small",
"label": "t:all.Small"
},
{
"value": "medium",
"label": "t:all.Medium"
},
{
"value": "large",
"label": "t:all.Large"
},
{
"value": "extra_large",
"label": "t:all.Extra_large"
},
{
"value": "full_screen",
"label": "t:all.Full_screen"
}
],
"default": "extra_large"
}
],
"blocks": [
{
"type": "image",
"name": "t:sections.image--slideshow.blocks.image.name",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "t:all.Heading",
"default": "Make a great \nfirst impression"
},
{
"type": "text",
"id": "text",
"label": "t:all.Body_text",
"default": "Add images and text to give focus to your chosen product, collection, or blog post."
},
{
"type": "header",
"content": "t:all.Buttons"
},
{
"type": "text",
"id": "first_button_label",
"label": "t:sections.image--slideshow.blocks.image.settings.first_button_label.label",
"default": "Shop now",
"info": "t:sections.image--slideshow.blocks.image.settings.first_button_label.info"
},
{
"type": "url",
"id": "first_button_link",
"label": "t:sections.image--slideshow.blocks.image.settings.first_button_link.label"
},
{
"type": "text",
"id": "second_button_label",
"label": "t:sections.image--slideshow.blocks.image.settings.second_button_label.label",
"default": "Learn more"
},
{
"type": "url",
"id": "second_button_link",
"label": "t:sections.image--slideshow.blocks.image.settings.second_button_link.label"
},
{
"type": "select",
"id": "buttons_style",
"label": "t:all.button_style",
"default": "filled",
"options": [
{
"value": "filled",
"label": "t:all.Filled"
},
{
"value": "outlined",
"label": "t:all.Outlined"
},
{
"value": "underlined",
"label": "t:all.underlined"
}
]
},
{
"type": "checkbox",
"id": "override_button_colors",
"label": "t:all.Button_color_override",
"default": false,
"info": "t:all.Button_color_override_info"
},
{
"type": "color",
"id": "button-background",
"label": "t:all.Primary_color",
"default": "#E68819"
},
{
"type": "color",
"id": "button-text",
"label": "t:all.Secondary_color",
"default": "#FFFFFF",
"info": "t:all.Secondary_button_color_info"
},
{
"type": "header",
"content": "t:all.Desktop"
},
{
"type": "image_picker",
"id": "image",
"label": "t:all.Image"
},
{
"type": "range",
"id": "desktop-caption-heading-size",
"label": "t:all.Heading_size",
"min": 40,
"max": 100,
"step": 1,
"unit": "t:all.px",
"default": 60
},
{
"type": "range",
"id": "desktop-caption-body-text-size",
"label": "t:all.Body_text_size",
"min": 12,
"max": 30,
"step": 1,
"unit": "t:all.px",
"default": 24
},
{
"type": "radio",
"id": "text_position",
"label": "t:all.Content_position",
"options": [
{
"value": "center_left",
"label": "t:all.Center_left"
},
{
"value": "center",
"label": "t:all.Center"
},
{
"value": "center_right",
"label": "t:all.Center_right"
},
{
"value": "bottom_left",
"label": "t:all.Bottom_left"
},
{
"value": "bottom",
"label": "t:all.Bottom"
},
{
"value": "bottom_right",
"label": "t:all.Bottom_right"
}
],
"default": "center_left"
},
{
"type": "header",
"content": "t:all.Mobile"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "t:all.Image_Optional"
},
{
"type": "range",
"id": "mobile-caption-heading-size",
"label": "t:all.Heading_size",
"min": 16,
"max": 60,
"step": 1,
"unit": "t:all.px",
"default": 36
},
{
"type": "range",
"id": "mobile-caption-body-text-size",
"label": "t:all.Body_text_size",
"min": 12,
"max": 20,
"step": 1,
"unit": "t:all.px",
"default": 16
},
{
"type": "radio",
"id": "mobile_text_position",
"label": "t:all.Content_position",
"options": [
{
"value": "center_left",
"label": "t:all.Center_left"
},
{
"value": "center",
"label": "t:all.Center"
},
{
"value": "center_right",
"label": "t:all.Center_right"
},
{
"value": "bottom_left",
"label": "t:all.Bottom_left"
},
{
"value": "bottom",
"label": "t:all.Bottom"
},
{
"value": "bottom_right",
"label": "t:all.Bottom_right"
}
],
"default": "center_left"
},
{
"type": "header",
"content": "t:all.Color"
},
{
"type": "color",
"id": "image_overlay",
"label": "t:sections.image--slideshow.blocks.image.settings.image_overlay.label",
"default": "#242424"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "t:all.percentage",
"label": "t:sections.image--slideshow.blocks.image.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "color",
"id": "caption-text",
"label": "t:sections.image--slideshow.blocks.image.settings.caption-text.label",
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": "t:sections.image--slideshow.presets.name",
"settings": {
"slide_transition_delay": 7
},
"blocks": [
{
"type": "image",
"settings": {
"title": "Make a great \nfirst impression",
"text": "Add images and text to give focus to your chosen product, collection, or blog post"
}
},
{
"type": "image",
"settings": {
"title": "Promote your \ntop earners",
"text": "Showcase key products or collections to maximise your profits"
}
}
]
}
],
"disabled_on": {
"groups": [
"header"
]
}
}
{% endschema %}