Jump to content

Change slideshow buttons / arrows

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Use this code. You can change color

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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.

Screen Shot 2022-05-17 at 6.57.13 PM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

image.thumb.png.cf90b49b706ed241d30e1e81e28f3d43.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Screen Shot 2022-07-21 at 8.28.24 am.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.