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.