- This topic has 11 replies, 3 voices, and was last updated 3 weeks, 5 days ago by
.
-
Posts
-
How to set the slider so that it adjusts to its width when scaling the browser? Now when scaling it cuts it off.
Applies to the carousel slider.
The slider seems to be working as designed. I am not sure of how you want it to work, but it is intended to always show at least one image. If there are several images, they will show clipped on the right. On my display, as the screen gets more narrow, it gets to a single image that keeps the aspect ratio ( it gets shorter as well as narrower).
It looks good on my phone – showing one image at a time. There is no way I know of to change the behavior with this slider. Other sliders might work differently.
Sorry – I don’t know of any simple way to change how ShowSliders works.
Just a note – using the arrow buttons options to navigate might be an alternate method. And it is possible that there are other sliders that allow dragging with a mouse, or sliding with a finger on a phone or touch screen.
The option controlling this are the carousel options Min , Max and Pix width.
What do you have in there?
@scrambler and all clear. It had max, min and pix set. All together. I removed the pix and now it displays elegantly even when I reduce the browser.
Thank you , thank you
It is not a perfect system, and requires some trial and errors.
If you need help on that be specific about what you perceive as the issue and provide the settings you are using
With these slider settings, it scales nicely when changing the size of the browser, but on a smartphone it looks tragic, because instead of 1 image, 1.5 images (slide element) are displayed.
Both are important to me. Scaling the slider with the browser (PC, MAC)) and displaying it correctly on phones, tablets, laptops, etc.
Try to use the same value (2) for min max to try and force 2 images on mobile.
Also make sure that you always refresh the browser when you change its size, as the layout does not respond dynamically, and what matters is what people will see when they load the page at a specific browser size.
If you really want one on mobile, another configuration you may want to test is 1,2,600 (min, max, pix width), to allow the image to scale to the full width of the phone. (remember the default is 250px, which is less than the width of the phone and why you end up with 1.5 image)
Ultimately, I did it and I think it’s good.
1 Minimum number of visible carousel items. (Default: 4)2 Maxmimum number of visible carousel items. (Default: 4)1000 px Width of individual carousel items. Interacts with Min/Max items and actual width of slider in browser. (Default: 250px)1 Number of carousel items that should move on animation. By default, slider will move all visible items.Thank you!!!
- You must be logged in to reply to this topic.