How can we add arrows in slideshow pipeline theme

[subhan97]

I am trying to get arrows on homepage slider

theme : pipeline

store:https://dhcbeauty.in/

desire output:

will share code in next Trail

[subhan97]

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 %}

{% if section.blocks.size > 0 %}

{% for block in section.blocks %}

{% unless block.settings.kicker == '' %}

{{ block.settings.kicker | escape }}

{% endunless %} {% unless block.settings.title == '' %}

{{ block.settings.title | escape }}

{% endunless %} {% unless block.settings.richtext == '' %}

{{ block.settings.richtext }}

{% endunless %} {% unless block.settings.link_text == '' %}

{{ block.settings.link_text | escape }}

{% endunless %}

‹

›

{% 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 %}
<a
class=“link-over-image”
href=“{{ block.settings.link }}”
aria-label=“{{ block.settings.title | strip_html | escape }}”

{% endif %}

{% if section.settings.height == ‘use_screen_full’ %}

{% render 'icon-scroll-down' %}

{% endif %}

{% endfor %}

{% endif %}

{% if section.blocks.size == 0 %}

{{ 'home_page.onboarding.no_content' | t }}

{% endif %}

{% 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 %}

[websensepro]

Hi @subhan97

1. Go to the online store edit the code

2. base.css and below paste the code

slideshow-component:not(.page-width) .slider-buttons {
border-right: 0;
border-left: 0;
justify-content: space-between;
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
over-flow:hidden;
z-index:4;
}

[subhan97]

Tried But not working sharing images