Slider doesn't resize correctly
There are cases, when our slider doesn't resize correctly. It is usually due CSS or JavaScript caused issues, but it could also be a configuration issue. You should go through these possible solutions:
1. Theme/page builder caused problems
1.1. Unclosed float CSS
If there are unclosed float CSS codes on your page, those elements doesn't have widths in the regulat way, so they can mess up width calculations.
Solution
You should turn on the Clear both before slider option, which would solva this problem.
1.2. JavaScript or CSS animation modifies the slider's parent
Sometimes themes and page builders are using js codes or css animations to modify how a place on your website looks like. If you put our slider into that place, this could cause resizing issues.
Possible solution 1
Turn on the Delayed (for lightbox/tabs) option.
Possible solution 2
Use this code to resize all sliders after the given time:
jQuery(window).load(function(){
setTimeout(function(){
jQuery.each(window['n2ss']['sliders'], function(index, value){
window['n2ss']['sliders'][index].responsive.invalidateResponsiveState = true;
window['n2ss']['sliders'][index].responsive.doResize();
});
}, 300);
});
jQuery(window).resize(function(){
setTimeout(function(){
jQuery.each(window['n2ss']['sliders'], function(index, value){
window['n2ss']['sliders'][index].responsive.invalidateResponsiveState = true;
window['n2ss']['sliders'][index].responsive.doResize();
});
}, 300);
});
and insert it into the JavaScript callbacks of your slider.
This code will trigger the resizing of our slider 300ms after your page finished loading or the browser is resized. Usually 300ms is enough, but you can try to change this value. You could try to increase it to for example 2000ms, just to see if this is the solution for your problem, because after 2 seconds it should surely work, if this is the solution. Then you could try to decrease until it still works.
2. Configuration issues
2.1. Responsive mode
At the responsive mode settings of your slider make sure you have Auto, Fullwidth or Fullpage responsive mode selected. The Fixed responsive mode is not responsive!
If you have Auto repsonsive mode selected, also make sure you have the Upscale and the Downscale option correctly. These options are making the slider bigger/smaller if the screen gets bigger or smaller.
2.2. Fill mode
It's based on the Slide background image fill option how your images look like in the slider. By default the fill option is used which will make the image as big as it needs to be to cover the whole slider. If you have center selected, that is not responsive, it will just display your background images with their original sizes.
This option is available separately at each slide too.