How can I adjust the position of arrows in my Dawn Theme featured collection slider?

[WraithAm]

Hello, Im attempting to change my featured collection slider from having two arrows below the featured collection and make it so the two arrows are on either side of the photos. I've added two photos below of exactly what I want it to look like and what it currently is (top is desired, bottom is current). Any help would be awesome! My store is forwardfurniture.ca

[GemPages]

Hello @WraithAm 

I would like to give you some recommendations to support you

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid theme file
3. Paste the below code before </head>

<style>
.slider-counter {
display: none;
}
.slider-buttons {
position: absolute;
transform: translateY(-50%);
top: 32%;
width: 100%;
justify-content: space-between;
z-index: 9;
}
.slider-button {
background: #f5f5f5;
}
</style>

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[WraithAm]

Hey I just put in the code, the bottom part disappeared showing the arrows but there's no arrows that show up on the products now to be able to scroll.

[GemPages]

Hey @WraithAm , let's try adding this new code:

<style>
.collection .slider-component-desktop .slider-counter {
display: none;
}
.collection .slider-component-desktop .slider-buttons {
position: absolute;
transform: translateY(-50%);
top: 32%;
width: 100%;
justify-content: space-between;
z-index: 9;
}
.collection .slider-component-desktop .slider-button {
background: #f5f5f5;
}
</style>

[WraithAm]

Hey, that worked! Is there any possible way to make it so the arrows only appear when you hover over the collection. Then to make the arrows black and half translucent? Then just a little bit to the center instead of the edges. Ill attach a photo on placement. Also there not in the middle of the photo if you would be able to do that as well:). Thank you very much for the help i've been trying to figure it out for hours. Location of arrow 

[GemPages]

Hello @WraithAm 

Let's try using this new code:

<style>
.collection .slider-component-desktop .slider-counter {
display: none;
}
.collection .slider-component-desktop .slider-buttons {
position: absolute;
transform: translateY(-50%);
top: 35%;
width: 100%;
justify-content: space-between;
z-index: 9;
transition: 0.5s;
opacity: 0;
padding: 0 2%;
}
.collection .slider-component-desktop:hover .slider-buttons {
opacity: 1;
}
.collection .slider-component-desktop .slider-button {
background: #182d4a;
color: #ffffff;
}
.collection .slider-component-desktop .slider-button[disabled] .icon {
color: #cdcdcd;
}
.collection .slider-component-desktop .slider-button .icon {
height: 1rem;
}
</style>

[WraithAm]

Yes!!! That works perfectly is there a way to change it to black and slight transparent instead of blue but besides that it works perfect!!!

[GemPages]

Hello @WraithAm 

I am back with a new code, let's try it:

<style>
.collection .slider-component-desktop .slider-counter {
display: none;
}
.collection .slider-component-desktop .slider-buttons {
position: absolute;
transform: translateY(-50%);
top: 35%;
width: 100%;
justify-content: space-between;
z-index: 9;
transition: 0.5s;
opacity: 0;
padding: 0 2%;
}
.collection .slider-component-desktop:hover .slider-buttons {
opacity: 1;
}
.collection .slider-component-desktop .slider-button {
background: #000000;
color: #ffffff;
opacity: 0.7;
}
.collection .slider-component-desktop .slider-button:hover {
opacity: 1;
}
.collection .slider-component-desktop .slider-button[disabled] .icon {
color: #cdcdcd;
}
.collection .slider-component-desktop .slider-button .icon {
height: 1rem;
}
</style>

[LJKz]

Hello @GemPages 

Thanks for the solution to the above question. If I wanted to make the slider arrow to loop, how do I do it?

[AudreyD]

Hi @GemPages,

Thank you for providing this solution, it worked for me. I used your code and I was able to remove the bottom arrows of the Featured collection slider, and add side buttons arrows.

But I am having an issue: the side arrows are affecting the clickability of the images. Meaning that from left to right, the stripe between the two blue lines (corresponding to the side buttons height) is not clickable.

Do you know how to fix this?

Thank you very much for your attention.