List - Carousel Arrows (Mobile) - SS 7.1

I am using the "List Block -  Carousel" to display content on this website. However, when I look at mobile, it isn't the most user-friendly since the arrows display at the bottom of the cards, rather than on the side (like Desktop). Therefore the user has to scroll down to click arrow, then scroll back up to read....

My question is:

Is there a way to move the arrows to the side instead? 

OR

Is there a way we can enable swipe function so they can flip through the cards easier on mobile?

https://mushroom-sheep-669e.squarespace.com/
pass: harp
(Go to classes page - middle section)

Thank you so much for your time and expertise,

Jess

23 minutes ago, graceandoak said:

I am using the "List Block -  Carousel" to display content on this website. However, when I look at mobile, it isn't the most user-friendly since the arrows display at the bottom of the cards, rather than on the side (like Desktop). Therefore the user has to scroll down to click arrow, then scroll back up to read....

My question is:

Is there a way to move the arrows to the side instead? 

OR

Is there a way we can enable swipe function so they can flip through the cards easier on mobile?

https://mushroom-sheep-669e.squarespace.com/
pass: harp
(Go to classes page - middle section)

Thank you so much for your time and expertise,

Jess

 

 

try

@media screen and (max-width: 575px) {
  .user-items-list-carousel .desktop-arrows {
    display: grid;
  }
  .user-items-list-carousel .mobile-arrows {
    display: none;
  }
}

Thanks so much, you make it look easy! 

Is there a way to make the buttons a bit smaller? Maybe by 30%?

On 8/4/2021 at 4:18 AM, graceandoak said:

Thanks so much, you make it look easy! 

Is there a way to make the buttons a bit smaller? Maybe by 30%?

Add to Design > Custom CSS

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

Amazing!! Thank you so much! 😄

Hi there! Having the same issue on my website. 

PAGE: HOMEPAGE (Accueil)
Desktop version look perfect! I need help with the mobile view. I would like to (1)resize the banner slideshow so it doesnt take too much space and then (2)move back the arrows on the left, as it is on desktop.

PAGE: ABOUT US (À propos)
Im using the list carousel and trying to (1)put the arrows on the left side (2)removing the arrows icon background and (3)changing the arrows icon color in black.

Any help on that one? Thanks a lot!

https://scms-test.squarespace.com/
PW: freelance

#1. Homepage

Try adding to Custom CSS box

/* Homepage List */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6511abf155e1d3647c5b6632"] ul {
    min-height: unset !important;
    height: 70vh !important;
}
}

#2. A propos page, use this code

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="64d3ff95212e137d3a05fc0d"] {
.user-items-list-carousel__arrow-icon-background.mobile-arrow-icon-background-area {
    background-color: transparent !important;
}
path.user-items-list-carousel__arrow-icon-foreground.mobile-arrow-icon-path {
    stroke: black !important;
}}
}

hi - similar question here - does anybody know how to make those arrows square vs circle? 

On 11/13/2023 at 10:59 PM, StephYoung said:

hi - similar question here - does anybody know how to make those arrows square vs circle? 

If you share link to page where you use carousel, we can check easier