I am trying to add prev and next slideshow button over slideshow banner can anyone help out
slideshow code:
{%- assign scroll_class = ‘’ -%}
{% if section.settings.height == ‘use_screen_full’ %}
{%- assign scroll_class = ‘has-scroll-arrow’ -%}
{%- endif -%}
{% assign hero_content_class = ‘hero__content’ %}
{% if section.settings.width == ‘wrapper–tiny’ or section.settings.width == ‘wrapper–narrow’ %}
{% assign hero_content_class = ‘hero__content hero__content–large’ %}
{% endif %}
{% for block in section.blocks %}
{{ block.settings.kicker | escape }}
{% endunless %} {% unless block.settings.title == '' %}{{ block.settings.title | escape }}
{% endunless %} {% unless block.settings.richtext == '' %}{% unless block.settings.enable_overlay_text %}
{% endunless %}{%- assign desktop_image_modifier = ‘’ -%}
{%- assign mobile_image = ‘’ -%}
{%- if block.settings.mobile_image != blank -%}
{%- assign desktop_image_modifier = ‘desktop’ -%}
{%- capture mobile_image -%}
{% render ‘hero’, img_object: block.settings.mobile_image, frame_height_class: section.settings.height, bg_position: block.settings.bg_position, modifier: ‘mobile’ %}
{%- endcapture -%}
{%- endif -%}
{% render ‘hero’, img_object: block.settings.image, frame_height_class: section.settings.height, bg_position: block.settings.bg_position, modifier: desktop_image_modifier %}
{{ mobile_image }}
{% if block.settings.link_text == ‘’ and block.settings.link %}
{% endif %}
{% if section.settings.height == ‘use_screen_full’ %}
{% if section.blocks.size == 0 %}
{% schema %}
{
“name”: “Slideshow”,
“settings”: [
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto-rotate slides”,
“default”: false
},
{
“type”: “range”,
“id”: “autoplay_speed”,
“min”: 1,
“max”: 15,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 8
},
{
“type”: “select”,
“id”: “height”,
“label”: “Section height”,
“default”: “use_screen_two_thirds”,
“options”: [
{ “value”: “use_screen_full”, “label”: “Full screen height”},
{ “value”: “use_screen_three_quarters”, “label”: “Three quarters of screen height”},
{ “value”: “use_screen_two_thirds”, “label”: “Two thirds of screen height”},
{ “value”: “use_screen_one_half”, “label”: “One half of screen height”},
{ “value”: “use_screen_one_third”, “label”: “One third of screen height”},
{ “value”: “use_screen_one_fifth”, “label”: “One fifth of screen height”},
{ “value”: “use_pixels_800”, “label”: “800px” },
{ “value”: “use_pixels_650”, “label”: “650px” },
{ “value”: “use_pixels_500”, “label”: “500px” },
{ “value”: “use_image”, “label”: “Image height”}
]
},
{
“type”: “select”,
“id”: “color_bg”,
“label”: “Background color”,
“default”: “palette–light bg–neutral”,
“options”: [
{ “value”: “palette–light bg–neutral”, “label”: “Default”},
{ “value”: “palette–light bg–accent”, “label”: “Light”},
{ “value”: “palette–dark bg–invert”, “label”: “Dark”},
{ “value”: “palette–dark bg–invert–accent”, “label”: “Dark accent”},
{ “value”: “palette–bright bg–bright”, “label”: “Bright”},
{ “value”: “palette–bright bg–bright–accent”, “label”: “Bright accent”}
]
},
{
“type”: “header”,
“content”: “Section spacing”
},
{
“type”: “select”,
“id”: “width”,
“label”: “Width”,
“default”: “wrapper–none”,
“options”: [
{ “value”: “wrapper–none”, “label”: “Full width” },
{ “value”: “wrapper–full”, “label”: “Full width padded” },
{ “value”: “wrapper”, “label”: “Page width” },
{ “value”: “wrapper–narrow”, “label”: “Page width narrow” }
]
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 180,
“step”: 2,
“unit”: “px”,
“label”: “Padding top”,
“default”: 0
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 180,
“step”: 2,
“unit”: “px”,
“label”: “Padding bottom”,
“default”: 0
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “Match size to other slides”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile image”
},
{
“type”: “select”,
“id”: “bg_position”,
“label”: “Position”,
“default”: “center-center”,
“options”: [
{ “label”: “Top”, “value”: “center-top” },
{ “label”: “Right”, “value”: “right-center” },
{ “label”: “Center”, “value”: “center-center” },
{ “label”: “Left”, “value”: “left-center” },
{ “label”: “Bottom”, “value”: “center-bottom” }
]
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 5,
“label”: “Image overlay opacity”,
“info”: “Increase contrast for legible text.”,
“default”: 15
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay color”,
“default”: “#000”
},
{
“type”: “checkbox”,
“id”: “enable_overlay_text”,
“label”: “Overlay behind text only”,
“default”: false
},
{
“type”: “header”,
“content”: “Text”
},
{
“type”: “text”,
“id”: “kicker”,
“label”: “Kicker”,
“default”: “Introducing”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Image slideshow”
},
{
“type”: “richtext”,
“id”: “richtext”,
“label”: “Text”,
“default”: “
Tell your brand’s story through images.
”},
{
“type”: “select”,
“id”: “text_align”,
“label”: “Alignment”,
“default”: “align–middle-center”,
“options”: [
{ “value”: “align–top-left”, “label”: “Top left”},
{ “value”: “align–top-center”, “label”: “Top center”},
{ “value”: “align–top-right”, “label”: “Top right”},
{ “value”: “align–middle-left”, “label”: “Middle left”},
{ “value”: “align–middle-center”, “label”: “Absolute center”},
{ “value”: “align–middle-right”, “label”: “Middle right”},
{ “value”: “align–bottom-left”, “label”: “Bottom left”},
{ “value”: “align–bottom-center”, “label”: “Bottom center”},
{ “value”: “align–bottom-right”, “label”: “Bottom right”}
]
},
{
“type”: “select”,
“id”: “text_color”,
“label”: “Text color”,
“default”: “text–white”,
“options”: [
{ “value”: “text–neutral”, “label”: “Normal text”},
{ “value”: “text–white”, “label”: “White”},
{ “value”: “text–primary”, “label”: “Primary accent”},
{ “value”: “text–secondary”, “label”: “Secondary accent”},
{ “value”: “text–black”, “label”: “Black”},
{ “value”: “text–invert–primary”, “label”: “Primary dark accent”},
{ “value”: “text–invert–secondary”, “label”: “Secondary dark accent”},
{ “value”: “text–invert”, “label”: “Inverted text color”},
{ “value”: “text–bright–primary”, “label”: “Primary bright accent”},
{ “value”: “text–bright–secondary”, “label”: “Secondary bright accent”}
]
},
{
“type”: “header”,
“content”: “Button”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Text”,
“default”: “View products”,
“info”: “Leave blank to link entire image”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “select”,
“id”: “button_color”,
“label”: “Color”,
“default”: “btn–white”,
“options”: [
{ “value”: “btn–primary”, “label”: “Bright accent” },
{ “value”: “btn–secondary”, “label”: “Secondary accent” },
{ “value”: “btn–neutral”, “label”: “Text color” },
{ “value”: “btn–black”, “label”: “Black” },
{ “value”: “btn–white”, “label”: “White” }
]
},
{
“type”: “select”,
“id”: “button_style”,
“label”: “Button style”,
“default”: “btn”,
“options”: [
{ “value”: “btn”, “label”: “Solid button”},
{ “value”: “btn–soft”, “label”: “Soft button”},
{ “value”: “btn–outline”, “label”: “Outlined button”}
]
}
]
}
],
“presets”: [{
“name”: “Slideshow”,
“category”: “Image”,
“settings”: {
“height”: “use_screen_two_thirds”
},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}]
}
{% endschema %}
desire output:
