Slider problems in mobile view (Stacked and Classic)

Support
#1

Hi there,

I’ve built out sliders (stacked) in Cornerstone on the link here - see Custom comic series: Mr’s G’s Pizzeria.

In the mobile view, you can see that the image is too small and I’m not able to zoom in on the slider (for some reason this seems disabled on mobile).

I’ve tried using the Classic Slider just underneath which looks better. However the preview doesn’t render for me in the Cornerstone builder, I can only see it live. In the Classic Slider, I can zoom in on the image in mobile, which helps.

Can you help me to:

  1. Find a way to make the images larger for mobile on Stacked Slider AND
  2. Be able to see the preview of Classic Slider in Cornerstone, please?

Thanks so much,
Ramya

#2

Hi,

I thought it would be useful to add a screenshot of the Classic Slider not rendering while using CS.

slider1
slider11706×451 33 KB

Cheers,
Ramya

#3

Hey @ramyasriram1,

Thanks for writing in! The Classic Slider uses an older JS query library. It does not display in the builder because the JS library is not loaded. This is to prevent any issues and conflicts with the builder. If you wish to use the new Slider element, you may need to remove the Slide Navigation element first because this is what is causing why you can zoom in on smaller or touch devices.

Thanks.

#4

Hi,
Thanks for your response! Is there any risk of the classic slider not working in the future? I ask as it’s the only “classic” element that I can’t see a preview of in the builder, so trying to decide if I absolutely must use the new slider element.

I’ve removed the Slide Navigation element but I’m still unable to zoom in on smaller devices. :frowning: Any help would be much appreciated.

Many thanks,
Ramya

#5

Hello Ramya,

With Classic elements, there will be less support and no enhancements. Sooner or later, it will be deprecated. As for the new Slider, kindly set the Image Display to “block”:

Screenshot 2024-04-07 at 12.43.58 PM
Screenshot 2024-04-07 at 12.43.58 PM636×952 37.1 KB

And then if that does not help, add this custom CSS snippet to the Image element inline CSS:

$el.x-image img{
  z-index: 1000;
}

Hope this helps in Zooming the image on mobile screens.

#6

Hi @ruenel,

Thank you! I’ve changed the image display to Block and have added in the custom CSS. Unfortunately I’m still unable to zoom in on smaller devices. I’ve also removed Slide Navigation.

Is there anything else I can try please? Not sure if I’m doing something wrong!

Many thanks,
Ramya

#7

I think we disable that on sliders to have better drag support. Using the following in your page css or global css should help you out. Have a great day.

.x-slide-container-viewport,
.x-slide-container-viewport *
{
  touch-action: unset;
}
#9

Understood, many thanks @charlie!

1 Like
#10

You are most welcome @ramyasriram1