How can I hide the bottom slider in the Origin Theme?

[INFRA]

Hi!

Just wondering if there is a way to hide the bottom of the slider and have just arrows on the left and right of the images?

website

password: skoffi

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.slider-counter,
.slideshow__autoplay {
display: none;
}

[INFRA]

Hi,

thanks for taking the time to reply! I tried this but nothing happened unfortunately, is there ay other code we could try?

Thanks!

[ZestardTech]

Hello @INFRA

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css / component-slideshow.css and paste this at the Top of the file:

.slider-counter.slider-counter--dots {
    display: none!important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
    display: none!important;
}

[INFRA]

Thanks! The dots have now disappeared but I would like the entire section to disappear, and only have the arrows on top of the image, on the left and right side, like below for example. Is that possible?

[ZestardTech]

Hello @INFRA

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css / component-slideshow.css and paste this at the Top of the file:

.slider-button {
/* Add positioning styles for the arrows */
position: absolute;
transform: translateY(-900%);
background-color: transparent;
border: none;
cursor: pointer;
z-index:9999;
}
.slider-button--prev {
left: 10px;
}
.slider-button--next {
right: 10px;
}
.slideshow__controls--top {
z-index: unset!important;
}
.slideshow__controls--top svg.icon.icon-caret {
color: red;
height: auto;
}

[INFRA]

Thank you, that looks great! They are just not visible on mobile, is there a way to do this? ( I will probably add vertical images covering the entire screen, so they could be in the middle of the image)

[ZestardTech]

Hello @INFRA

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css / component-slideshow.css and paste this at the Top of the file:

@media (max-width:749px){
.slider-button {
transform: translateY(-400%);
}
}

[INFRA]

Thank you, I think the arrows are showing up right at the top of the mobile view now, see below. Is there any way to change the height?

[ZestardTech]

Hello @INFRA

Working Fine also mobile view.

[INFRA]

Hm weird, this is on an iPhone 11: