Public Ticket #3341938
Resize Image Layers on Mobile


  • Silvio started the conversation

    Hello, I'm trying type = fullsize but I find a problem on mobile devices.

    The configuration is the following:
    skinsPath: '/lib/layerslider/skins/',
    skin: 'v6',
    type: 'fullsize',
    fullSizeMode: 'hero',
    globalBGColor: '#c224a0',
    globalBGImage: '/images/slider/TA2288.JPG',
    globalBGSize: 'cover',
    navStartStop: true,
    navPrevNext: true,
    navButtons: false,
    hoverPrevNext: false,
    hoverBottomNav: false,
    showBarTimer: true,
    showCircleTimer: false,
    showSlideBarTimer: false,
    autoStart: true,
    hideOnMobile: false,
    The problem is that on mobile devices the images of the layers do not resize, they are keeping the original size.
    In debug mode I see these warnings:
    Neighter initial width nor layersContainerWidth width specified!
    Setting slider width to element.clientWidth (360px).
    Neighter initial height nor layersContainerHeight specified!
    Setting slider height to element.parent.clientHeight (1284px).
    Slider type is "fullsize" and it has no layersContainerWidth property specified!
    Setting layersContainerWidth to sliderWidth (360px).
    Slider type is "fullsize" and it has no layersContainerHeight property specified!
    Saving layersContainerHeight to sliderHeight (0px).
    Notice this last line. Could it be that this is causing the layer images to not resize as expected?
    How can I solve that?
    Thank you

  • Silvio replied


    When I start on PC wide screen (1280px) and open the navigator console (chrome) and click on "Toogle device toolbar", navigator show preview mobile simulator, there layers images resize right, that's layerslider started on a screen width of 1280px. But if I do F5 to refresh and starting layerslider again (starting on 360px width), the problem is there, layers images doesn't resized.

  •  112
    George replied

    Hello Silvio,

    Please add an initial width and height (in pixels) to your project (you can use the style attribute for that on the slider element or the width / height option in the init code.

    Best Regards,
    George | Kreatura Dev Team