Hello, I'm trying type = fullsize but I find a problem on mobile devices.
The configuration is the following: $('#layerslider').layerSlider({ 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: INITIAL SLIDER STYLE 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
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.
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.
Hello, I'm trying type = fullsize but I find a problem on mobile devices.
The configuration is the following:
$('#layerslider').layerSlider({
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:
INITIAL SLIDER STYLE
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
Edit:
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.
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