Is any chance to reduce top and bottom gaps on he mobile devices, I have tried with css but no success. Other sliders don't do this kind of problem.
And other thing. Slider change slides automatically but when I hover on the slider it stops, I wasn't able to find option to turn off stop on hoverm maybe I miss it.
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
The problem is that your background image does not follow up on the slider's size changes, therefore it generates blank spaces on certain resolutions.
You can adjust this by setting that image up as a slide background. And then using the Slide Background Image -> Size option, setting it to cover or stretch. This way the background image will always fill the slider.
Alternatively, you can also leave it as an image layer, and set its Width and Height to 100% (Styles tab), so it covers the slider's canvas fully.
The hover pausing can be disabled with the Slider Settings -> Slideshow -> Pause on hover option.
I need this slider to by 100% width. The size of images is 1280 x 500.
I tried full width but had to change canvas size to 700 because despite the fact that images are 500 it was cutting images at the top and bottom. So then the canvas is to big and then on the mobile gap is big and if I changed size options of background image it was stretch vertically with "stretch" or cut obviously because it's bigger that mobile screen. Only time when canvas size was 1280 x 500 was when using full width with hero scene mode. But the gaps were big on mobile. And even if I changed to the "cover" or stretch with background it's the same as above on mobile.
I tried with styles field 100% width and height but still stretch vertically even when canvas is 1280 x 500.
I just would like to have 1280 x 500 (size of images) slider full width on all devices without such a big gaps on mobile.
As I can see you've added your images as layers. The mentioned Slide Background Image -> Size option is only working with images set as slide background.
The fullwidth layout can be a bit tricky. This mode is always stretching the slider to the sides of the browser. Therefore, on certain resolutions your images will be either cut or deformed, as the slider's aspect ratio becomes different from the images.
Imagine it as watching a 4:3 video on a 16:9 TV. It won't fit perfectly as they have different aspect ratios. You have three options. You can show the whole video with its original sizes, but leave the sides blank. Or you can stretch the video to the sides of the TV, therefore deforming it. Or you can enlarge the video to fill the screen, without chaning its aspect ratio, resulting in cropping. This is how fullwidth setups work.
Regardless, as I can see you have managed to adjust the slider in the meantime, so it looks good on mobile.
And in case you are referring to the empty areas above and under the slider, those are not part of it. Please see the attached screenshots, the red areas are not part of the slider. The slider only takes up the blue space. The blank areas above and under it, are other page elements, as I can see they are Visual Composer columns/blocks.
Hello there
Is any chance to reduce top and bottom gaps on he mobile devices, I have tried with css but no success. Other sliders don't do this kind of problem.
And other thing. Slider change slides automatically but when I hover on the slider it stops, I wasn't able to find option to turn off stop on hoverm maybe I miss it.
Hello tcsrobkam,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
The problem is that your background image does not follow up on the slider's size changes, therefore it generates blank spaces on certain resolutions.
You can adjust this by setting that image up as a slide background. And then using the Slide Background Image -> Size option, setting it to cover or stretch. This way the background image will always fill the slider.
Alternatively, you can also leave it as an image layer, and set its Width and Height to 100% (Styles tab), so it covers the slider's canvas fully.
The hover pausing can be disabled with the Slider Settings -> Slideshow -> Pause on hover option.
Hello there
I tried but it doesn't work exactly right.
I need this slider to by 100% width. The size of images is 1280 x 500.
I tried full width but had to change canvas size to 700 because despite the fact that images are 500 it was cutting images at the top and bottom. So then the canvas is to big and then on the mobile gap is big and if I changed size options of background image it was stretch vertically with "stretch" or cut obviously because it's bigger that mobile screen. Only time when canvas size was 1280 x 500 was when using full width with hero scene mode. But the gaps were big on mobile. And even if I changed to the "cover" or stretch with background it's the same as above on mobile.
I tried with styles field 100% width and height but still stretch vertically even when canvas is 1280 x 500.
I just would like to have 1280 x 500 (size of images) slider full width on all devices without such a big gaps on mobile.
Kind regards
Robert
As I can see you've added your images as layers. The mentioned Slide Background Image -> Size option is only working with images set as slide background.
The fullwidth layout can be a bit tricky. This mode is always stretching the slider to the sides of the browser. Therefore, on certain resolutions your images will be either cut or deformed, as the slider's aspect ratio becomes different from the images.
Imagine it as watching a 4:3 video on a 16:9 TV. It won't fit perfectly as they have different aspect ratios. You have three options. You can show the whole video with its original sizes, but leave the sides blank. Or you can stretch the video to the sides of the TV, therefore deforming it. Or you can enlarge the video to fill the screen, without chaning its aspect ratio, resulting in cropping. This is how fullwidth setups work.
Regardless, as I can see you have managed to adjust the slider in the meantime, so it looks good on mobile.
And in case you are referring to the empty areas above and under the slider, those are not part of it. Please see the attached screenshots, the red areas are not part of the slider. The slider only takes up the blue space. The blank areas above and under it, are other page elements, as I can see they are Visual Composer columns/blocks.
The screenshots: