How can I disable slideshow transitions on my webpage?

The options provided for the slideshow asset does not include a “none” option where there is no intro transition for the photos/slideshow.

<slide-show-item {% if section.settings.transition_type != ‘reveal’ %}reveal-visibility{% endif %} {{ slide_attributes }}>

How would you change this option to simply do nothing and not have a transition / reveal upon loading ?

1 Like

@PatDoMore

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

https://texansaddles.com/

@PatDoMore

thanks can you please send slideshow section code

#shopify-section-{{ section.id }} { --progress-bar-color: {{ section.blocks.first.settings.text_color.red }}, {{ section.blocks.first.settings.text_color.green }}, {{ section.blocks.first.settings.text_color.blue }}; --section-autoplay-duration: {% if section.settings.autoplay %}{{ section.settings.cycle_speed }}s{% else %}0s{% endif %}; --section-animation-play-state: paused; background-color: {{ section.settings.background }}; /* Allows to set a placeholder color while loading */ } {%- for block in section.blocks -%} {%- assign text_position = block.settings.text_position | split: '_' | first -%} {%- case text_position -%} {%- when 'top' -%} {%- assign section_items_alignment = 'flex-start' -%} {%- when 'middle' -%} {%- assign section_items_alignment = 'center' -%} {%- when 'bottom' -%} {%- assign section_items_alignment = 'flex-end' -%} {%- endcase -%} #block-{{ section.id }}-{{ block.id }} { --heading-color: {{ block.settings.text_color.red }}, {{ block.settings.text_color.green }}, {{ block.settings.text_color.blue }}; --text-color: {{ block.settings.text_color.red }}, {{ block.settings.text_color.green }}, {{ block.settings.text_color.blue }}; --primary-button-background: {{ block.settings.button_background.red }}, {{ block.settings.button_background.green }}, {{ block.settings.button_background.blue }}; --primary-button-text-color: {{ block.settings.button_text_color.red }}, {{ block.settings.button_text_color.green }}, {{ block.settings.button_text_color.blue }}; --section-blocks-alignment: {{ section_items_alignment }}; --section-blocks-overlay-color: {{ block.settings.overlay_color.red }}, {{ block.settings.overlay_color.green }}, {{ block.settings.overlay_color.blue }}; --section-blocks-overlay-opacity: {{ block.settings.overlay_opacity | divided_by: 100.0 }}; } {%- endfor -%}
{%- for block in section.blocks -%} {%- comment -%} ------------------------------------------------------------------------------------------------------------------ IMAGE PART ------------------------------------------------------------------------------------------------------------------ {%- endcomment -%}

{%- assign image = block.settings.image -%}
{%- assign split_image = block.settings.split_image -%}
{%- assign mobile_image = block.settings.mobile_image -%}

{%- assign image_aspect_ratio = image.aspect_ratio | default: 2.63 -%}

{%- comment -%}
If the image is split and that we want to preserve the ratio, we have to multiply the ratio by 2 (as each image
only account for half the screen size)
{%- endcomment -%}

{%- if image != blank and split_image != blank and section.settings.section_height == ‘auto’ -%}
{%- assign image_aspect_ratio = image_aspect_ratio | times: 2.0 -%}
{%- endif -%}

{%- capture slide_content -%}

{%- if image != blank -%} {%- else -%} {% capture image_name %}lifestyle-{% cycle '1', '2' %}{%- endcapture -%} {{- image_name | placeholder_svg_tag: 'slideshow__image slideshow__image--placeholder' -}} {%- endif -%}

{%- comment -%}If a second image (split image) is uploaded, we use it. Note that we use the same ratio as the first image (to have equal column height){% endcomment %}
{%- if image != blank and split_image != blank -%}

{%- endif -%}

{%- if mobile_image != blank -%}

{%- endif -%}

{%- comment -%}

CONTENT PART

{%- endcomment -%}

{%- capture section_content -%}
{%- if block.settings.subheading != blank -%}

{{ block.settings.subheading | escape }}

{%- endif -%}

{%- if block.settings.title != blank -%}

{{ block.settings.title | escape }}

{%- endif -%}

{%- capture buttons -%}
{%- if block.settings.button_1_text != blank -%}
{{ block.settings.button_1_text | escape }}
{%- endif -%}

{%- if block.settings.button_2_text != blank -%}
{{ block.settings.button_2_text | escape }}
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.button_1_text != blank and block.settings.button_2_text != blank -%}

{{- buttons -}}
{%- elsif buttons != blank -%}
{{- buttons -}}
{%- endif -%} {%- endcapture -%}

{%- if section_content != blank -%}

{%- assign text_alignment = block.settings.text_position | split: '_' | first -%} {%- assign text_position = block.settings.text_position | split: '_' | last -%}
{{- section_content -}}
{%- endif -%} {%- endcapture -%}

{%- comment -%}If only the button 1 link is filled, then we make the whole slide clickable{%- endcomment -%}

{%- capture slide_attributes -%}
{{ block.shopify_attributes }}
id=“block-{{ section.id }}-{{ block.id }}”
class=“slideshow__slide {% if split_image != blank %}slideshow__slide–split{% endif %} {% if section.settings.transition_type == ‘sweep’ %}slideshow__slide–sweep{% endif %}”
{% unless forloop.first %}hidden{% endunless %}
{% if section.settings.section_height == ‘auto’ %}
style=“–image-aspect-ratio: {{ image_aspect_ratio }}; --mobile-image-aspect-ratio: {{ mobile_image.aspect_ratio | default: 1 }};”
{% endif %}
{%- endcapture -%}

<slide-show-item {% if section.settings.transition_type != ‘reveal’ %}reveal-visibility{% endif %} {{ slide_attributes }}>
{%- if block.settings.button_1_link != blank and block.settings.button_1_text == blank and block.settings.button_2_text == blank -%}

{{- slide_content -}}

{%- else -%}

{{- slide_content -}}
{%- endif -%} {%- endfor -%}

{%- if section.blocks.size > 1 -%}
<page-dots {% if section.settings.autoplay %}animation-timer{% endif %} class=“slideshow__nav container”>
{%- for block in section.blocks -%}
<button class=“slideshow__progress-bar” aria-controls=“block-{{ section.id }}-{{ block.id }}” {% if forloop.first %}aria-current=“true”{% endif%}>
{{ ‘general.accessibility.go_to_slide’ | t: num: forloop.index }}

{%- endfor -%}

{%- endif -%}

{% schema %}
{
“name”: “Slideshow”,
“class”: “shopify-section–slideshow”,
“max_blocks”: 5,
“settings”: [
{
“type”: “select”,
“id”: “section_height”,
“label”: “Section height”,
“options”: [
{
“value”: “auto”,
“label”: “Original image ratio”
},
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fit”,
“label”: “Fit screen height”
}
],
“info”: “Choose "Original image ratio" to not cut images. Learn more”,
“default”: “auto”
},
{
“type”: “select”,
“id”: “transition_type”,
“label”: “Transition type”,
“options”: [
{
“value”: “sweep”,
“label”: “Sweep”
},
{
“value”: “reveal”,
“label”: “Reveal”
},
{
“value”: “fade”,
“label”: “Fade”
}
],
“default”: “sweep”
},
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto rotate between slides”,
“default”: true
},
{
“type”: “range”,
“id”: “cycle_speed”,
“min”: 4,
“max”: 20,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 5
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“info”: “Used while slideshow image is loading”,
“default”: “rgba(0,0,0,0)”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“info”: “2160 x 1080px .jpg recommended, 1080 x 1080px .jpg recommended if split”,
“label”: “Image”
},
{
“type”: “image_picker”,
“id”: “split_image”,
“info”: “1080 x 1080px .jpg recommended. Won’t show up on mobile.”,
“label”: “Split image”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile image”,
“info”: “1000 x 1400px .jpg recommended. If none is set, desktop image will be used.”
},
{
“type”: “header”,
“content”: “Content”
},
{
“type”: “select”,
“id”: “text_position”,
“label”: “Text position”,
“options”: [
{
“value”: “top_left”,
“label”: “Top left”
},
{
“value”: “top_center”,
“label”: “Top center”
},
{
“value”: “top_right”,
“label”: “Top right”
},
{
“value”: “middle_left”,
“label”: “Middle left”
},
{
“value”: “middle_center”,
“label”: “Middle center”
},
{
“value”: “middle_right”,
“label”: “Middle right”
},
{
“value”: “bottom_left”,
“label”: “Bottom left”
},
{
“value”: “bottom_center”,
“label”: “Bottom center”
},
{
“value”: “bottom_right”,
“label”: “Bottom right”
}
],
“default”: “middle_center”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Subheading”,
“default”: “Tell your story”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Slide title”
},
{
“type”: “text”,
“id”: “button_1_text”,
“label”: “Button 1 text”
},
{
“type”: “url”,
“id”: “button_1_link”,
“label”: “Button 1 link”,
“info”: “Leave the "Button 1 text" and "Button 2" settings empty to make the slide fully clickable.”
},
{
“type”: “text”,
“id”: “button_2_text”,
“label”: “Button 2 text”
},
{
“type”: “url”,
“id”: “button_2_link”,
“label”: “Button 2 link”
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text”,
“default”: “#ffffff
},
{
“type”: “color”,
“id”: “button_background”,
“label”: “Button background”,
“default”: “#ffffff
},
{
“type”: “color”,
“id”: “button_text_color”,
“label”: “Button text”,
“default”: “#000000
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay”,
“default”: “#000000
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: “Overlay opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“default”: 30
}
]
}
],
“presets”: [
{
“name”: “Slideshow”,
“blocks”: [
{
“type”: “image”,
“settings”: {
“title”: “Slide 1”
}
},
{
“type”: “image”,
“settings”: {
“title”: “Slide 2”
}
}
]
}
]
}
{% endschema %}

Hello @KetanKumar just checking back in on this possible solution.

Please advise if you need more information

Hi @PatDoMore - how did you solve this at the end?