How to make Carousel displaying only 1 item on mobile only?

Site URL: https://www.dadaism.io/home#toppick

Hi there,

I'm new to the community, I couldn't find the answer to my problem so I'm seeking help here.

I'm trying to make the "Our Topic Pick" carousel to display only 1 item when the screen is resized to mobile, but keep 3 items when it's not. Right now when I switch to mobile, it display 2 items, which is not the result I want..

Does anyone know how to solve this? Thanks in advance.

Adam

6 hours ago, dadaism said:

Site URL: https://www.dadaism.io/home#toppick

Hi there,

I'm new to the community, I couldn't find the answer to my problem so I'm seeking help here.

I'm trying to make the "Our Topic Pick" carousel to display only 1 item when the screen is resized to mobile, but keep 3 items when it's not. Right now when I switch to mobile, it display 2 items, which is not the result I want..

Does anyone know how to solve this? Thanks in advance.

 

Adam

You can try adding to Home > Design > custom css

@media only screen and (max-width: 767px) {
  section[data-section-id="6310690285fdc040c4e8e871"] .summary-item {
    width: 101.5% !important;
  }

  section[data-section-id="6310690285fdc040c4e8e871"] .summary-item .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
  } 
}

Support me by pressing 👍 if this useful for you

My testing

Wow bangank36 you're a life saver! I've been trying to work it out on my own for the longest time, and I couldn't find it anywhere in the forum. Thank you so much! It's working:)

Do you know if square space's carousel support auto scrolling? And is it possible to make the next and previous arrow bigger on the side instead of small at the top right in mobile?

On 9/22/2022 at 2:58 AM, dadaism said:

Wow bangank36 you're a life saver! I've been trying to work it out on my own for the longest time, and I couldn't find it anywhere in the forum. Thank you so much! It's working:)

Do you know if square space's carousel support auto scrolling? And is it possible to make the next and previous arrow bigger on the side instead of small at the top right in mobile?

Try adding this to Settings > Advanced > Code Injection > Footer

<script>
  Y.on('domready', function () {
       var galleries = Y.Squarespace.GalleryManager.getGalleries();
       for( i = 0; i<galleries.length; i++){
           galleries[i].setAttrs({"autoplay":true})
       }
   });
</script>

@tuanphan & @Beyondspace I've been looking at the same thing for the site I'm working on i.e. overriding the number of items displayed in a Carousel Summary Block on mobile from 4 (desktop) to 1 (mobile).

While I can make the .summary-items 100% width, the problem occurs that the controls for the Carousel Summary Block don't update to go with it. If you look at @dadaism's site, it suffers the same error. 

If you look at the 'Top Picks' section on the desktop version of the site (https://www.dadaism.io/), it displays a total of 12 items at 3 items per slide across 4 slides. To navigate this, you click the next arrow 3 times.

On the mobile version, the .summary-item size has been modified to display 1 item at 100%, but you can still only click the next button 3 times and therefore only see 4 of the 12 items. Even though the appearance has changed, it seems to still calculate how many slides there are based on the original setting. 

As mentioned, this is happening on my site and i've seen it on others too. So I guess my question is can this be amended? Is there a variable (presumably Json?) that can be modified to make it match up or can slide controls be added to other Summary Blocks? I'd rather not hack it so I double up my Summary Blocks with the different display settings and then use media queries to display them or not. 

Any help or thoughts on what to do would be gratefully received! 🤞

16 hours ago, DinViesel said:

@tuanphan & @Beyondspace I've been looking at the same thing for the site I'm working on i.e. overriding the number of items displayed in a Carousel Summary Block on mobile from 4 (desktop) to 1 (mobile).

While I can make the .summary-items 100% width, the problem occurs that the controls for the Carousel Summary Block don't update to go with it. If you look at @dadaism's site, it suffers the same error. 

If you look at the 'Top Picks' section on the desktop version of the site (https://www.dadaism.io/), it displays a total of 12 items at 3 items per slide across 4 slides. To navigate this, you click the next arrow 3 times.

On the mobile version, the .summary-item size has been modified to display 1 item at 100%, but you can still only click the next button 3 times and therefore only see 4 of the 12 items. Even though the appearance has changed, it seems to still calculate how many slides there are based on the original setting. 

As mentioned, this is happening on my site and i've seen it on others too. So I guess my question is can this be amended? Is there a variable (presumably Json?) that can be modified to make it match up or can slide controls be added to other Summary Blocks? I'd rather not hack it so I double up my Summary Blocks with the different display settings and then use media queries to display them or not. 

Any help or thoughts on what to do would be gratefully received! 🤞

It seems you have figured it out, right? I check that currently, it shows 1 item on mobile display

On 11/20/2022 at 8:48 AM, Beyondspace said:

It seems you have figured it out, right? I check that currently, it shows 1 item on mobile display

Hi @Beyondspace. Thanks for reading my post and sorry I've not been clear enough. 

Yes, you're right, it does display 1 item on mobile, but that bit isn't the problem.

The issue on the site above (as well as mine and anyone else's who attempt this), is that when you modify it to display 1 item, when you click the 'Next' button on the carousel, it doesn't slide through all of the items. 

Take a look between the desktop and mobile versions to see how many items you can slide through. 

Hope this makes the problem clearer 🙂

I'm having this same problem! It shows one image at a time on mobile, but it doesn't display all the carousel items.

On 12/15/2022 at 3:52 AM, daniellevickers said:

I'm having this same problem! It shows one image at a time on mobile, but it doesn't display all the carousel items.

You can consider adding 2 Carousels, then we will give code to show 1 on desktop, show another on mobile

Hi Forum circle members, revisiting the 'How to make a Carousel display a single image on mobile only' thread, I'm not having any luck with the above code example. I think I'm getting the ID details completely wrong. Can anyone assist please?

Or should we try two carousels as noted by @tuanphan and show/ hide? What code would I use for that in 7.0 (I've found instructions for 7.1 but we are in 7.0).

Website is neildesign.com.au

Brine template / Mara Brag / Version 7.0

Thankyou, Helen

On 5/12/2023 at 11:21 AM, Brisvegas_Helen said:

Hi Forum circle members, revisiting the 'How to make a Carousel display a single image on mobile only' thread, I'm not having any luck with the above code example. I think I'm getting the ID details completely wrong. Can anyone assist please?

Or should we try two carousels as noted by @tuanphan and show/ hide? What code would I use for that in 7.0 (I've found instructions for 7.1 but we are in 7.0).

Website is neildesign.com.au

Brine template / Mara Brag / Version 7.0

Thankyou, Helen

If you create 2 carousels, we can give code to show 1 on desktop, show another on mobile

Thanks @tuanphan

I have made a second carousel, both shown on this page: https://neildesign.com.au/mobile

my current CSS is below, but obviously not working:

/* Hiding and showing sections */
@media and (max-width:641px) {
section[data-section-id="#block-e5cf74dd476b7a890fa7"] {
 display:none !important;
}
}
@media and (min-width: 641px) {
section [data-section-id="#block-yui_3_17_2_1_1684116914810_14177"] {
 display:none !important;
}
}

Thank you for your help.

4 minutes ago, Brisvegas_Helen said:

Thanks @tuanphan

I have made a second carousel, both shown on this page: https://neildesign.com.au/mobile

my current CSS is below, but obviously not working:

/* Hiding and showing sections */
@media and (max-width:641px) {
section[data-section-id="#block-e5cf74dd476b7a890fa7"] {
 display:none !important;
}
}
@media and (min-width: 641px) {
section [data-section-id="#block-yui_3_17_2_1_1684116914810_14177"] {
 display:none !important;
}
}

 

Thank you for your help.

You can try

/* Hiding and showing sections */
@media and (max-width:641px) {
  #block-e5cf74dd476b7a890fa7{
    display:none !important;
  }
}
@media and (min-width: 641px) {
  #block-yui_3_17_2_1_1684116914810_14177 {
    display:none !important;
  }
}

thankyou @Beyondspace but it didn't work for me.

This is our entire CSS thread, I'm not sure if it might be an order or placement issue?

Thankyou for your help,

the code we have:

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* Hiding and showing sections */
@media and (max-width:641px) {
  #block-e5cf74dd476b7a890fa7{
    display:none !important;
  }
}
@media and (min-width: 641px) {
  #block-yui_3_17_2_1_1684116914810_14177 {
    display:none !important;
  }
}

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
.sqs-block-gallery {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
} 
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-gallery {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
} 

/* Insert Code for Mobile Above This Line */
}

On 5/15/2023 at 10:28 AM, Brisvegas_Helen said:

Thanks @tuanphan

I have made a second carousel, both shown on this page: https://neildesign.com.au/mobile

my current CSS is below, but obviously not working:

/* Hiding and showing sections */
@media and (max-width:641px) {
section[data-section-id="#block-e5cf74dd476b7a890fa7"] {
 display:none !important;
}
}
@media and (min-width: 641px) {
section [data-section-id="#block-yui_3_17_2_1_1684116914810_14177"] {
 display:none !important;
}
}

 

Thank you for your help.

Hide top, show second on desktop

and hide bottom, show top on mobile

Is that right?

The top banner we want to show for Tablet and Desktop sites, hide on mobile.

So Desktop sees 3x images across the screen.

And the bottom banner, to show on Tablet, and hide on desktop.

So Mobile sees 1 image across the screen.

Thanks for your help @tuanphan

Add to Design > Custom CSS

/* hide top slide on mobile */
@media screen and (max-width:640px) {
   div#block-e5cf74dd476b7a890fa7 {
    display: none !important;
} 
}
/* hide bottom slide on desktop */
@media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1684116914810_14177 {
       display: none !important;
    }
}

Thank you so much @tuanphan you have got it working perfectly!

Hey, maybe you guys can help me too!

Our site: www.bottegajacobs.com

1. we want that the individual products in the carousel can also be opened by tapping, currently they are quasi dead and you can not interact.

2. for the size of the slideshow it would be great if it is cropped on the right as in the photo I am attaching. There should be 2 products fully visible and a third in the cut so that you can check that it is a slideshow.

Thanks in advance,

Paul

On 6/28/2024 at 7:22 PM, Paul_Wille said:

Hey, maybe you guys can help me too!

Our site: www.bottegajacobs.com

1. we want that the individual products in the carousel can also be opened by tapping, currently they are quasi dead and you can not interact.

2. for the size of the slideshow it would be great if it is cropped on the right as in the photo I am attaching. There should be 2 products fully visible and a third in the cut so that you can check that it is a slideshow.

Thanks in advance,

Paul

#1. You can use this code to Custom CSS box

@media screen and (max-width:767px) {
section[data-section-id="667d7a7030813771141393c7"] .mobile-arrows {
    display: flex !important;
}
}

Hello again and Thanks for your help,

for this slideshow, I have marked the picture again and explain again what we want to do exactly. the slider should show a section of an additional product on the right. in addition, the products should lead directly to the product by tapping on them, the last coder only added arrows for us.

Best regards, Paul 

Maybe someone has a solution, we are still struggling with this.

The pictures/products must link to the Product, plus a part of the next product has to be seen for an intuitive slideshow information.

thanks in advanced,

paul