Jump to content

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

Recommended Posts

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

Screenshot 2022-09-20 100417.png

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

Screenshot 2022-09-20 100417.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.3d5dc9301df51bc7738b2093db0f8c66.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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?

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

@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! 🤞

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

image.thumb.png.5f6309263abeffb476d9e9a1c121a05a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.thumb.png.5f6309263abeffb476d9e9a1c121a05a.png

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 🙂

 

Link to comment
  • 4 weeks later...
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.