How can I change slideshow arrows?

Hello,

I would like to change the arrows used to navigate the slideshow from '-->' to '<' '>'. The transparent white background should change from round to square and could be a bit smaller. How can I make these changes?

I would greatly appreciate your assistance! 

https://www.lebendige-gaerten-hh.de/
Pword: lebendigegaertenhh2023

Use same code

Thank you for your reply @tuanphan. I would like to design the arrows for the slideshow and the carousel as shown in the attached screenshot. I would greatly appreciate any help!
 

18 hours ago, Nomis said:

Thank you for your reply @tuanphan. I would like to design the arrows for the slideshow and the carousel as shown in the attached screenshot. I would greatly appreciate any help!
 

Do you have link to this page? I can copy arrow style. 

@tuanphan I found this arrow version in the shop section of Squarespace. Here is the link. I've created a sample shop page on my site.

https://lebendige-gaerten.squarespace.com/shop/p/style-01-ej5na-2aszh
Pword: lebendigegaertenhh2023

You can use this code to Custom CSS, replace example icon url with your icon url

button[class*="arrow-button"] svg {
    display: none !important;
}
[class*="arrow-icon-background"] {
        background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
    background-color: transparent !important;
}
button[class*="arrow-button--left"] [class*="arrow-icon-background"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
}
button[class*="arrow-button--right"] [class*="arrow-icon-background"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}

Thank you @tuanphan! Unfortunately, it's not working exactly as I want. I uploaded a square background image, but it's still displayed in a round shape. Also, the position is not exactly as I envision it. It should be at the edge of the page, as shown in the example. Could you assist me with this again?

21 hours ago, Nomis said:

Thank you @tuanphan! Unfortunately, it's not working exactly as I want. I uploaded a square background image, but it's still displayed in a round shape. Also, the position is not exactly as I envision it. It should be at the edge of the page, as shown in the example. Could you assist me with this again?

Can you send icon file url?

13 hours ago, tuanphan said:

Can you send icon file url?

@tuanphan here we go. 
 

https://images.squarespace-cdn.com/content/v1/6475e652b738031c56cb3b98/688a9a3a-d7a1-4da8-b5e7-5c8ebe2a5919/lg_background_arrow_slideshow_01.png?format=2500w

On 12/21/2023 at 6:06 AM, Nomis said:

@tuanphan here we go. 
 

https://images.squarespace-cdn.com/content/v1/6475e652b738031c56cb3b98/688a9a3a-d7a1-4da8-b5e7-5c8ebe2a5919/lg_background_arrow_slideshow_01.png?format=2500w

You mean it should be like this?

Yes @tuanphan, basically something like that. However, for the position and shape of the arrows, I'm looking for something more like the example I already sent. Can you help me with this again?

20 hours ago, Nomis said:

Yes @tuanphan, basically something like that. However, for the position and shape of the arrows, I'm looking for something more like the example I already sent. Can you help me with this again?

Add this CSS code

.user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button {
    border-radius: 0 !important;
}

Hey, we have the same Problem,

we'd like to have pretty much identical arrows in the same position as the person who opened the post. (www.bottegajacobs.com), but only for a mobile section. Can you help us?

Best regards, Paul 

On 6/28/2024 at 9:56 PM, Paul_Wille said:

Hey, we have the same Problem,

we'd like to have pretty much identical arrows in the same position as the person who opened the post. (www.bottegajacobs.com), but only for a mobile section. Can you help us?

Best regards, Paul 

 

You can use this to Custom CSS box

@media screen and (max-width:767px) {
section[data-section-id="667e8aef609f49410725a2bb"] .desktop-arrows.arrows-bottom-outer {
    display: flex !important;
    bottom: unset !important;
    top: 50% !important;
    justify-content: space-between !important;
}}

Thanks for your help, you are awesome!

works nearly, for the arrows i´m looking for new links in the meanwhile, the arrows would then have to go to the left and right at the edge, can you take another look?

Best regards, Paul

Hey @tuanphan, can you just take a look again? We are still struggling with this point 🙂

On 7/3/2024 at 3:03 PM, Paul_Wille said:

Hey @tuanphan, can you just take a look again? We are still struggling with this point 🙂

I don't see problem now or I checked wrong page

https://www.bottegajacobs.com/