Jump to content

change list carousel arrows icons into text / words

Recommended Posts

  • 3 weeks later...
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";
}}

image.png.d3e812a5022d42e6be7207e4bb53f23c.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

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!

 

image.thumb.jpeg.9c340b0379d6e175650f5cec02ebb69a.jpeg

 

Edited by moonlitdesign
Link to comment
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!

 

image.thumb.jpeg.9c340b0379d6e175650f5cec02ebb69a.jpeg

 

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

 

image.thumb.png.d61fcadde2d4e62ff9fd44eb83e95d4f.png

image.thumb.png.392de243a10a6666cf16385554a838ab.png

 

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 */

 

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.