Change slideshow buttons / arrows

tuanphan · July 21, 2022

9 hours ago, markadekoning said:

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

Add to Design > Custom CSS

/* Mobile arrows */
@media screen and (max-width:767px) {
[data-section-id="62d7ad25ad77dc0842fe5c88"] .mobile-arrows {
    position: absolute;
    top: 50%;
    width: 90%;
    justify-content: space-between !important;
}
}

markadekoning · July 22, 2022

Nice, thanks.

Is there a way to change the arrow icon to something you've added to managed files?

Cheers!

tuanphan · July 22, 2022

On 7/21/2022 at 5:32 AM, markadekoning said:

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

Mobile arrows to custom icon? Use this

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62c77a65bfc92508f6724275"] {
div.mobile-arrows svg {
    display: none !important;
}
div.mobile-arrows div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
button.mobile-arrow-button.mobile-arrow-button--left div {
    background-image: url(https://cdn.pixabay.com/photo/2022/03/16/01/23/bird-7071408__340.jpg);
}
.user-items-list-carousel__arrow-icon-background.mobile-arrow-icon-background-area {
    background-image: url(https://cdn.pixabay.com/photo/2022/07/16/15/34/kid-7325370__340.jpg);
}}}

markadekoning · July 25, 2022

I'm finding it hard to get the new url to work properly.

Is there a way to just remove the circle? Or change the color of the circle?

Cheers!

tuanphan · July 26, 2022

22 hours ago, markadekoning said:

I'm finding it hard to get the new url to work properly.

Is there a way to just remove the circle? Or change the color of the circle?

Cheers!

Use this CSS

.user-items-list-carousel__arrow-icon-background.mobile-arrow-icon-background-area {
    background-color: transparent !important;
}
.white-bold .user-items-list-carousel .user-items-list-carousel__arrow-icon-background+svg path {
    fill: red !important;
    stroke: red !important;
}

markadekoning · July 27, 2022

Thanks @tuanphan this has worked great, how do I buy you a coffee?

galangster · April 28, 2023

Hello! I'm trying to get the arrows to be the same. One is built with the new Squarespace 7.1 and the other is through the old 7.0. I tried CSS and it wasn't working. I would like them to just be the same. Any help would be greatly appreciated!!

Here is the site. I've also attached some images.

PW: HELP123!

https://ellen-fisher.squarespace.com/

tuanphan · April 29, 2023

9 hours ago, galangster said:

Hello! I'm trying to get the arrows to be the same. One is built with the new Squarespace 7.1 and the other is through the old 7.0. I tried CSS and it wasn't working. I would like them to just be the same. Any help would be greatly appreciated!!

Here is the site. I've also attached some images.

PW: HELP123!

https://ellen-fisher.squarespace.com/

You can add this to Design > Custom CSS. Replace Example Arrow image url with new url

/* List arrows */
button.user-items-list-carousel__arrow-button, button.mobile-arrow-button {
    background-image: url(https://static1.squarespace.com/static/6447936db557a42927661514/t/644930ba4ff9f163e9626999/1682518202114/Right+Arrow+2.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
button.user-items-list-carousel__arrow-button svg,  button.mobile-arrow-button svg {
    visibility: hidden;
}
button.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left,  button.mobile-arrow-button--left {
    transform: rotate(-180deg) !important;
}
.user-items-list-carousel__arrow-icon-holder {
    left: -50px;
    z-index: 9999999;
    width: calc(~"100% + 100px");
}
.user-items-list-carousel__gutter {
    overflow: visible;
}

galangster · April 29, 2023

1 hour ago, tuanphan said:

You can add this to Design > Custom CSS. Replace Example Arrow image url with new url

/* List arrows */
button.user-items-list-carousel__arrow-button, button.mobile-arrow-button {
    background-image: url(https://static1.squarespace.com/static/6447936db557a42927661514/t/644930ba4ff9f163e9626999/1682518202114/Right+Arrow+2.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
button.user-items-list-carousel__arrow-button svg,  button.mobile-arrow-button svg {
    visibility: hidden;
}
button.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left,  button.mobile-arrow-button--left {
    transform: rotate(-180deg) !important;
}
.user-items-list-carousel__arrow-icon-holder {
    left: -50px;
    z-index: 9999999;
    width: calc(~"100% + 100px");
}
.user-items-list-carousel__gutter {
    overflow: visible;
}

Thanks for the help! So this is what I get when I put in the code. The goal is to have the second gallery (that I think comes from 7.0) have the same arrows at the newer 7.1 one.

galangster · April 29, 2023

8 hours ago, tuanphan said:

You can add this to Design > Custom CSS. Replace Example Arrow image url with new url

/* List arrows */
button.user-items-list-carousel__arrow-button, button.mobile-arrow-button {
    background-image: url(https://static1.squarespace.com/static/6447936db557a42927661514/t/644930ba4ff9f163e9626999/1682518202114/Right+Arrow+2.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
button.user-items-list-carousel__arrow-button svg,  button.mobile-arrow-button svg {
    visibility: hidden;
}
button.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left,  button.mobile-arrow-button--left {
    transform: rotate(-180deg) !important;
}
.user-items-list-carousel__arrow-icon-holder {
    left: -50px;
    z-index: 9999999;
    width: calc(~"100% + 100px");
}
.user-items-list-carousel__gutter {
    overflow: visible;
}

My apologies, I tried to apply the code to this section and it looks like this (first image). Trying to have it be similar to the second image where it has a rounded, circle background. If that makes sense. Thanks!

tuanphan · May 1, 2023

On 4/29/2023 at 5:19 PM, galangster said:

Thanks for the help! So this is what I get when I put in the code. The goal is to have the second gallery (that I think comes from 7.0) have the same arrows at the newer 7.1 one.

Can you share link to 7.0? We can check arrow code easier

galangster · May 1, 2023

3 hours ago, tuanphan said:

Can you share link to 7.0? We can check arrow code easier

So it's actually Squarespace 7.1 but a gallery on the old builder if that makes sense. The image attached is the arrows I would like to change. Similar to the circle arrows in a previous image.

tuanphan · May 2, 2023

Add this new CSS code

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
}

gbrnstn · May 2, 2023

4 hours ago, tuanphan said:

Add this new CSS code

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
}

Hi @tuanphan ,

I'm also on 7.0 and looking to replace the white arrow on grey transparent background next and previous controls with a simple black arrow.

Are you able to share the code for this?

Many thanks in advance

tuanphan · May 3, 2023

11 hours ago, gbrnstn said:

Hi @tuanphan ,

I'm also on 7.0 and looking to replace the white arrow on grey transparent background next and previous controls with a simple black arrow.

Are you able to share the code for this?

Many thanks in advance

If you share link to your 7.0 site, we can check easier

galangster · May 3, 2023

19 hours ago, tuanphan said:

Add this new CSS code

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
}

This is great! Do you know what I would make the hover color a lighter version of this? rgb(179, 164, 148)

gbrnstn · May 3, 2023

7 hours ago, tuanphan said:

If you share link to your 7.0 site, we can check easier

http://www.burniston.com/portfolio-one#/laphroaig/

Example gallery page here.

Thanks, and let me know if you need more info.

gbrnstn · May 4, 2023

On 5/3/2023 at 9:53 AM, gbrnstn said:

http://www.burniston.com/portfolio-one#/laphroaig/

Example gallery page here.

Thanks, and let me know if you need more info.

@tuanphan

tuanphan · May 5, 2023

On 5/3/2023 at 12:13 PM, galangster said:

This is great! Do you know what I would make the hover color a lighter version of this? rgb(179, 164, 148)

Use this

.sqs-gallery-controls>a:hover {
    background: rgb(179, 164, 148) !important;
}

djcdubz · December 8, 2023

On 5/11/2022 at 3:57 AM, tuanphan said:

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

@tuanphan Am using this code currently and it shows fine on desktop view. How would I apply the customization seen here to mobile, specifically just the arrow type (e006) and opacity?

site: www.havenandhomedesign.com

pass: havenandhome

tuanphan · December 8, 2023

3 hours ago, djcdubz said:

@tuanphan Am using this code currently and it shows fine on desktop view. How would I apply the customization seen here to mobile, specifically just the arrow type (e006) and opacity?

site: www.havenandhomedesign.com

pass: havenandhome

Can you share link to exact page where you use slideshow?

djcdubz · December 8, 2023

3 hours ago, tuanphan said:

Can you share link to exact page where you use slideshow?

https://www.havenandhomedesign.com/process

tuanphan · December 9, 2023

12 hours ago, djcdubz said:

https://www.havenandhomedesign.com/process

Use this CSS code for mobile arrow

/* List Section - UI Custom Arrows */
button[class*="arrow-button"] svg {
    display: none !important;
}
button[class*="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;
    top: -10px;
    position: relative;
}
button[class*="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;
      top: -10px;
    position: relative;
}

djcdubz · December 9, 2023

15 hours ago, tuanphan said:

Use this CSS code for mobile arrow

/* List Section - UI Custom Arrows */
button[class*="arrow-button"] svg {
    display: none !important;
}
button[class*="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;
    top: -10px;
    position: relative;
}
button[class*="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;
      top: -10px;
    position: relative;
}

Plugged this in. Changed the arrows in mobile view fine, but it also altered the location of the arrows in desktop view. It's specifically the "top: -10px;" part of the code that's causing the problem. -10 seems to be necessary for mobile placement but skews the desktop placement. Any thoughts how to correct this?

tuanphan · December 10, 2023

15 hours ago, djcdubz said:

Plugged this in. Changed the arrows in mobile view fine, but it also altered the location of the arrows in desktop view. It's specifically the "top: -10px;" part of the code that's causing the problem. -10 seems to be necessary for mobile placement but skews the desktop placement. Any thoughts how to correct this?

Remove new code, use this code

@media screen and (max-width:767px) {
/* List Section - UI Custom Arrows */
button[class*="arrow-button"] svg {
    display: none !important;
}
button[class*="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;
    top: -10px;
    position: relative;
}
button[class*="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;
      top: -10px;
    position: relative;
}
}

Change slideshow buttons / arrows

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

donforello

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources