Change slideshow buttons / arrows

Hey guys,

I am trying to change the arrows on my slideshow; they are currently "-->" arrows, and I would like to have these arrows: "<" and ">". 

I would like to keep the small box / button on which the arrows are. 

Does anyone have an idea how to achieve that?

Highly appreciate help on this 🙂

Can you share link to page where you use slideshow? We can help easier

@tuanphan https://greyhound-alpaca-f863.squarespace.com/

password: alpaca

Thanks! 

Try adding to Design > Custom CSS. Replace images with arrow image urls

/* Reel right arrow */
button.gallery-reel-control-btn[aria-label="Next Slide"]>div {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/709/709586.svg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
button.gallery-reel-control-btn[aria-label="Next Slide"]:before {
    background: none !important;
}
button.gallery-reel-control-btn[aria-label="Next Slide"]>div>* {
    visibility: hidden;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]>div {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/709/709586.svg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(180deg)
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]:before {
    background: none !important;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]>div>* {
    visibility: hidden;
}

@tuanphan amazing! Is it possible to have the grey square behind the "< >" arrows, as I had it before? 

See below the screenshot of how it looked before with the "-->" arrows & after I applied your code

Use this code. You can change color

button.gallery-reel-control-btn {
    background: grey;
}

this code only changes the left arrow, i need to change de next slide too. How can i do it?

9 hours ago, Eldescueve said:

this code only changes the left arrow, i need to change de next slide too. How can i do it?

The code should work on both arrows. Can you share link to page where you added slideshow?

@tuanphan

How can I do this same thing with carousel arrows? I want to be able to keep the styled background, but use the simple svg arrow.

Can you let me know what part of the code you shared I need to change for carousel?

On 1/6/2022 at 12:43 AM, TarekP said:

@tuanphan

How can I do this same thing with carousel arrows? I want to be able to keep the styled background, but use the simple svg arrow.

Can you let me know what part of the code you shared I need to change for carousel?

Can you share link to page where you added carousel? We can check easier

Sent DM

Hi I would like to change my slideshow arrow from --> to > too.. 

www.adelphicollective.com

Can you kindly assist me? thank u!

23 hours ago, carriealways said:

Hi I would like to change my slideshow arrow from --> to > too.. 

 

www.adelphicollective.com

 

Can you kindly assist me? thank u!

Add to Design > Custom CSS

/* List Section - UI Custom Arrows */
button.user-items-list-banner-slideshow__arrow-button svg {
    display: none !important;
}
button.user-items-list-banner-slideshow__arrow-button--left div:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(270deg);
    display: block;
    color: white;
    font-size: 30px;
    line-height: 60px;
}
button.user-items-list-banner-slideshow__arrow-button--right div:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(-270deg);
    display: block;
    color: white;
    font-size: 30px;
    line-height: 60px;
}

On 5/18/2022 at 8:57 AM, ZABS860 said:

Hi, I'm trying to use this code but I can't seem to get it to work. I also want to change my arrows (ideally all of the arrows on the site) from --> to just >, I input this code but nothing seemed to change. Could you help me figure out what I'm doing wrong? The website is https://aimeesternluxuryrealestate.squarespace.com and the password is Newpassword, the list section I'm trying to change specifically is the section titled Neighborhoods on the home page near the bottom.

Use this

/* List Section - UI Custom Arrows */
button.user-items-list-carousel__arrow-button svg {
    display: none !important;
}
button.user-items-list-carousel__arrow-button--left div:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(270deg);
    display: block;
    
    font-size: 30px;
    line-height: 60px;
}
button.user-items-list-carousel__arrow-button--right div:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(-270deg);
    display: block;
    color: white;
    font-size: 30px;
    line-height: 60px;
}

8 hours ago, ZABS860 said:

Thank you so much!! I have 2 follow up questions, if you are able to answer those as well:

Is there a way to make the arrows show up exactly the same on mobile as they do on desktop? Right now on mobile they default to going beneath the list block and since they're white, they don't show up. 

And is there a way to make the lines of the arrows thinner, but keep them the same size? I actually scaled mine up to 50 px font size.

#1. I don't see arrows on mobile. Can you take a screenshot of its position?

#2. SS Font Icon has that Icon only. See list here (pass: abc) https://tuanphan.squarespace.com/ss-ui-fonts?noredirect

If you need to make it thinner, will need to use another font icon

You can choose here & send me link: https://fontawesome.com/search?p=1&q=arrow&s=solid%2Cbrands

On 5/25/2022 at 9:46 AM, ZABS860 said:

Well that's just it. The template automatically has the arrows placed BELOW the gallery slideshow on mobile, and since they're white they do not show up. I really want the arrows to show up over the images on mobile, just like they do on desktop.

 

could we use these arrows? https://fontawesome.com/icons/chevron-right?s=thin

 

Thank you so much for all your help!

Use this new code to keep desktop arrow on mobile

/* List Section - UI Custom Arrows */
button.user-items-list-carousel__arrow-button svg, .mobile-arrows svg {
    display: none !important;
}
button.user-items-list-carousel__arrow-button--left div:before, .mobile-arrow-button--left:before  {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(270deg);
    display: block;
    font-size: 30px;
    line-height: 60px;
}
button.user-items-list-carousel__arrow-button--right div:before, .mobile-arrow-button--right:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(-270deg);
    display: block;
    font-size: 30px;
    line-height: 60px;
}

On 6/9/2022 at 2:00 AM, ZABS860 said:

Hi, unfortunately this did not work. It didn't change anything on the mobile preview and now it's reverted the arrows on the desktop version back to their original form, which is black on a white background. Please advise?

Can you disable autoplay temporarily? We can check easier

Can you disable scroll? We can check easier

Which icon you want to add?

10 hours ago, ZABS860 said:

I have disabled infinite scroll.

And I don't need to add an icon, I already have it, I just need to make the arrows show up on Mobile exactly as they do on Desktop. I've pasted the code I'm currently using below:

 

/* List Section - UI Custom Arrows */
button.user-items-list-carousel__arrow-button svg, .mobile-arrows svg {
    display: none !important;
}
button.user-items-list-carousel__arrow-button--left div:before, .mobile-arrow-button--left:before  {
    content: "\e02c";
    font-family: 'squarespace-ui-font';
    display: block;
      color: white;
    font-size: 40px;
    line-height: 60px;
}
button.user-items-list-carousel__arrow-button--right div:before, .mobile-arrow-button--right:before {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    display: block;
      color: white;
    font-size: 40px;
    line-height: 60px;
}

 

Thank you so much for all your help!

Don't remove any code in your current code. Add to Design > Custom CSS

button.mobile-arrow-button.mobile-arrow-button--left:before, button.mobile-arrow-button.mobile-arrow-button--right:before {
    color: black;
}

Newpassword

https://aimeesternluxuryrealestate.squarespace.com/

Remove code I just sent above & use this new code

.user-items-list-item-container[data-section-id="617c318e31eb236084b5748d"] .mobile-arrows {
    position: absolute;
    top: 50%;
    justify-content: space-between !important;
    width: 100%;
}

13 hours ago, ZABS860 said:

website: https://www.aimeesternestates.com/ pw: Newpassword

Hi!! This is still working great- but 2 questions:

Is it possible to get rid of the transparent grey box that shows up for half a second when you click an arrow on mobile? I tried to take a picture but it shows up and disappears so quickly I couldn't get one.

Also - Is there a way to make the arrows less sensitive on mobile? They're easy to click

And lastly - I coded the images in this section to be clickable. Is there a way to maintain that while also allowing for dragging the carousel on mobile to navigate to the other slides? Currently you can only drag on the white space in between the slides on mobile, whereas before I made the images clickable and custom coded the arrows, you were able to drag them along. 

Can you share link to page where you have problem?

I did ! This section is on the homepage of the website.

15 hours ago, ZABS860 said:

I did ! This section is on the homepage of the website.

Do you still need help? Can you take a screenshot of section where you have problem?

16 hours ago, ZABS860 said:

Hi I do still need help, "the neighborhoods" is the section in question. On mobile you are only able to drag to navigate in the white space between the images, not drag the whole image. And the arrows have a grey box that shows up when clicked that I would like to get rid of.

I see it is fine here. Do you use iPhone?

Hey @tuanphan,

I'm trying to achieve a similar result but can't get it to work.

The aim is to have the arrows positioned on the side of the image on mobile, currently it looks like this (see image).

This is all the relevant code in my Design > Custom CSS currently;

/* List Section - UI Custom Arrows */
button.user-items-list-carousel__arrow-button svg, .mobile-arrows svg {
    display: none !important;
}
button.user-items-list-carousel__arrow-button--left div:before, .mobile-arrow-button--left:before  {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(270deg);
    display: block;
    font-size: 30px;
    line-height: 60px;
}
button.user-items-list-carousel__arrow-button--right div:before, .mobile-arrow-button--right:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(-270deg);
    display: block;
    font-size: 30px;
    line-height: 60px;
}
.user-items-list-item-container[data-section-id="617c318e31eb236084b5748d"] .mobile-arrows {
    position: absolute;
    top: 50%;
    justify-content: space-between !important;
    width: 100%;
}

/* Reel right arrow */
button.gallery-reel-control-btn[aria-label="Next Slide"]>div {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/709/709586.svg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
button.gallery-reel-control-btn[aria-label="Next Slide"]:before {
    background: none !important;
}
button.gallery-reel-control-btn[aria-label="Next Slide"]>div>* {
    visibility: hidden;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]>div {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/709/709586.svg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(180deg)
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]:before {
    background: none !important;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]>div>* {
    visibility: hidden;
}
/* List carousel arrows mobile */
@media screen and (max-width:767px) {
svg.user-items-list-carousel__arrow-icon {
    width: 20px;
    height: 20px;
}
.user-items-list-carousel__arrow-button {
    width: 30px;
    height: 30px;
}
}
 

Can you see where I've gone wrong?

Thanks!

Website: www.coastalgrain2.squarespace.com

Pword: 123coastalgrain123