change list carousel arrows icons into text / words

Heyy, is there a way to change the pagination arrows on carousels to text instead ?

I would like the arrows to be replaced with the words - 

prev  -  next

with the hyphen in the middle.

is this possible ? 

www.annajonesbridal.co.uk/home-new

any luck or info on this? 

On 12/29/2023 at 11:53 PM, daniellenoakes said:

any luck or info on this? 

You mean these arrows?

On 1/1/2024 at 6:57 AM, tuanphan said:

You mean these arrows?

yes please! 🙂

On 1/4/2024 at 4:32 PM, daniellenoakes said:

yes please! 🙂

You can add this code to Website Tools (under Not Linked) > Custom CSS

.user-items-list-item-container[data-section-id="654e5c607321f13ea19ffccc"] {
.user-items-list-carousel__arrow-button svg {
    display: none !important;
}
button.user-items-list-carousel__arrow-button--left:after {
    content: "Prev";
}
button.user-items-list-carousel__arrow-button--right:after {
    content: "Next";
}}

is there a way to do this for the mobile arrows too?

its working on desktop for me but not mobile !

I tried this code:

@media screen and (max-width:767px) {

.mobile-arrows {
    display: none !important;}
  
  .desktop-arrows {

display:block!important;}
  
  .user-items-list-carousel__arrow-container {

width:450px!important;
    margin: auto!important; }

}

but looks awful! they aren't showing centred, or the correct colour on mobile #1d1d1d - They have a blue link colour.

- i need a way to be able to adjust the space in the middle between the 'arrows' so it doesn't affect the visibility of the quote.

www.moonlitdesign.uk/home-old

@tuanphan thank you!

On 3/21/2024 at 12:07 AM, moonlitdesign said:

is there a way to do this for the mobile arrows too?

its working on desktop for me but not mobile !

 

I tried this code:

 

@media screen and (max-width:767px) {

.mobile-arrows {
    display: none !important;}
  
  .desktop-arrows {

display:block!important;}
  
  .user-items-list-carousel__arrow-container {

width:450px!important;
    margin: auto!important; }

}

 

 

but looks awful! they aren't showing centred, or the correct colour on mobile #1d1d1d - They have a blue link colour.

- i need a way to be able to adjust the space in the middle between the 'arrows' so it doesn't affect the visibility of the quote.

 

www.moonlitdesign.uk/home-old

 

@tuanphan thank you!

 

 

Use this code for mobile

.user-items-list-item-container[data-section-id="65e07302487e8725e7601b17"] {
.mobile-arrows svg {
    display: none !important;
}
button.mobile-arrow-button.mobile-arrow-button--left:after {
    content: "Prev";
}
button.mobile-arrow-button.mobile-arrow-button--right:after {
    content: "Next";
}}

4 hours ago, tuanphan said:

Use this code for mobile

.user-items-list-item-container[data-section-id="65e07302487e8725e7601b17"] {
.mobile-arrows svg {
    display: none !important;
}
button.mobile-arrow-button.mobile-arrow-button--left:after {
    content: "Prev";
}
button.mobile-arrow-button.mobile-arrow-button--right:after {
    content: "Next";
}}

 

THANK YOU ! that worked perfectly. is there a way to increase the size of the gap between them so they are full width? @tuanphan

On 3/25/2024 at 7:15 PM, moonlitdesign said:

THANK YOU ! that worked perfectly. is there a way to increase the size of the gap between them so they are full width? @tuanphan

You can use CSS code like this

/* space between mobile prev - next */
.user-items-list-item-container[data-section-id="65e07302487e8725e7601b17"] .mobile-arrows>button {
    margin-left: 30px !important;
    margin-right: 30px !important;
}

@tuanphan thank you for the above! 

just testing the site and when you click next/prev, they disappear as you go through the carousel. is there a way to keep them visible through the whole scroll of the carousel? 

www.moonlitdesign.uk/home-old

On 4/6/2024 at 5:59 PM, moonlitdesign said:

@tuanphan thank you for the above! 

just testing the site and when you click next/prev, they disappear as you go through the carousel. is there a way to keep them visible through the whole scroll of the carousel? 

 

www.moonlitdesign.uk/home-old

Use this CSS code

@media screen and (min-width: 768px) {
[data-section-id="65e07302487e8725e7601b17"] button.user-items-list-carousel__arrow-button {
    opacity: 1 !important;
    transform: unset !important;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:before {
    content: "( PREV )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:before {
    content: "( NEXT )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:after,
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:after {
    display: none;
}}

8 hours ago, tuanphan said:

Use this CSS code

@media screen and (min-width: 768px) {
[data-section-id="65e07302487e8725e7601b17"] button.user-items-list-carousel__arrow-button {
    opacity: 1 !important;
    transform: unset !important;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:before {
    content: "( PREV )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:before {
    content: "( NEXT )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:after,
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:after {
    display: none;
}}

 

fantastic thank you so much!

Hi,

I'm having the same issue with part of my arrow disappearing when clicked, but I can't change the 'display' of it because of how it's coded.  Thoughts?

Also, I'd like to justify each arrow to the left and right of the container.  Right now I'm using L/R margins, but I'd like them to be adaptive.

https://collie-helicon-pkhp.squarespace.com/projects?p

password: test123

Thanks in advance!

22 hours ago, Jamalama said:

Hi,

I'm having the same issue with part of my arrow disappearing when clicked, but I can't change the 'display' of it because of how it's coded.  Thoughts?

Also, I'd like to justify each arrow to the left and right of the container.  Right now I'm using L/R margins, but I'd like them to be adaptive.

 

 

https://collie-helicon-pkhp.squarespace.com/projects?p

password: test123

Thanks in advance!

Nevermind! - figured these both out.

For the broken arrows, rather than hiding the stock arrows and creating new ones, I just manipulated the stock arrows since they didn't have the disappearing issue and were extremely similar to the arrows I had added.

For the position of the arrows I did this:

/* arrow locations */
[data-section-id="6658bf15078f2e04ba48585f"] {
  .arrows-bottom {
    width:100% !important;
  }
  button.user-items-list-carousel__arrow-button--right {
    justify-self: end; }
  button.user-items-list-carousel__arrow-button--left {
    justify-self: start; }
  }
/* arrow locations */