Home Forums Weaver Show Posts & Show Sliders the slider is cut off

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #71859
    Yvonne
    Participant

    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.

    #71864
    Weaver
    Keymaster

    Link, please.

    #71875
    Yvonne
    Participant
    #71877
    Weaver
    Keymaster

    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.

    #71878
    Weaver
    Keymaster

    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.

    #71879
    scrambler
    Moderator

    The option controlling this are the carousel options Min , Max and Pix width.

    What do you have in there?

    #71885
    Yvonne
    Participant

    @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

    #71889
    Yvonne
    Participant

    oops but it doesn’t show up well on my phone

    #71894
    scrambler
    Moderator

    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

    #71895
    Yvonne
    Participant

    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.

    #71896
    scrambler
    Moderator

    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)

    #71897
    Yvonne
    Participant

    Ultimately, I did it and I think it’s good.

      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)
     Number of carousel items that should move on animation. By default, slider will move all visible items.

    Thank you!!!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.