mobile Show adjacent items for Auto-layout carousel on mobile

Hi

Anyone know how to show adjacent items for carousel on mobile view?

I've used Will Meyers code to show more than one item

Here's what I was thinking:

Thanks!

Hi,

Can you share link to page where you use Carousel? We can check easier

Stumbled on the same issue. I'm useless at Flex, the Will Meyers code helped me out with the first part. 

I know this can't be the right way to approach it but before I gave up I tried tweaking the margin on the targeted class.

Quote

   .user-items-list-carousel__slides {
      grid-template-columns: ~"repeat(2,1fr)" !important;
      margin-left:29% !important;
    }

That seems a place to start, I've then just stumbled around with padding and grid-space until it looks passable. I think I'm going to code jail but it's a client request and something that should be implemented in the autolayout block anyway

On 12/21/2022 at 8:55 AM, tuanphan said:

Hi,

Can you share link to page where you use Carousel? We can check easier

unthinkable.squarespace.com/home-final

PW: unthinkable

Thanks!

On 1/19/2023 at 9:22 AM, Goood_Studio said:

For anyone that is interested.. 

Here's what worked for me. Code was pasted in the  site Header:

 

<style>
  @media screen and (max-width:767px) {
  .user-items-list-item-container[data-section-id="639c679e8b229b37d4607eed"] ul {
    grid-template-columns: repeat(2,1fr) !Important; margin-left:29% !important;
}
  }
</style>

 

Thanks @nickehsmith for the missing bit

How did you make the carousel clickable and swipeable with out buttons? I'm trying to achieve the same effect.

On 10/11/2023 at 8:02 PM, JasonArend said:

How did you make the carousel clickable and swipeable with out buttons? I'm trying to achieve the same effect.

Hi. Sorry if it's too late but I use a code someone else wrote to move the button over the image and hide it:

/* Make list images on people clickable */
section[data-section-id="ADD YOUR OWN"] li.list-item {
    position: relative !important;
}
section[data-section-id="ADD YOUR OWN"] .list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
section[data-section-id="ADD YOUR OWN"] a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}