Fullpage layout

You can find the Fullpage layout at the Slider settings → Size tab.

Basic behavior

A Fullpage slider fills the entire width and height of the browser.

Configuration

Force full width

Originally your slider can be only as wide as the container it is in, but with this option you can force it to go outside its containers, and make it as wide as your screen is. This option has limitations, so it won't work in every case, and you will have to put your slider into your template or theme.

Overflow-X

The slider puts overflow-x: hidden on the body or the HTML tag of your site to avoid vertical scrollbars appearing during certain animations.

Adjust slider width to

You can specify the CSS selector of one of the slider's parent elements and the slider tries to have the width of this element instead of the browser window's.

Constrain ratio

Smart Slider 3 allows your layers to be positioned on the slide canvas (regardless of which slide editing mode you're using). This slide canvas can either keep or lose the original ratio which is based on the slider size. The default setting is off, which means the canvas can lose the default ratio. This allows you to keep your layers, e.g. 10px from the top-left corner of the slider every time, because the canvas has the same size as the slider.

Let's see a few simple examples to understand this setting better. You have a full page slider and the slider size is set to 1200x500px. See how the results change on an iPhone 6.

Height based on

• Real height: by default from the slider's height we are removing the url bar of browsers when the slider is inserted on top of the page. This way the slider's bottom part would be really on the bottom of the screen, not lower.

  Note: if you manually resize your browser's height, your slider will only resize its height after the height is reduced by around 200px. This is due to an issue happening on tablets and mobile phones, that their url bars are appearing/disappearing while you are scrolling on pages. The url bar appearance/disappearance resizes your browser's height and that creates a bad user experience if your slider's height always changes while the user scrolls on the page.

• CSS 100vh makes your slider's height exactly as big as the browser's height is. (So it includes the height of the URL bar.

Decrease height

With the Decrease height option, you can remove a fix px size from your slider's height on all devices.

Decrease height by selectors

The Full page sliders are as high as the screen is, but most people want them with smaller height, to keep for example their top menu before the slider. With this option you can give the HTML selectors (separated with commas) of those parts of your website, what you would like to remove from the screen height calculation. You can see here how to look for code parts in your website. Example usecase for the header and div.bottom selectors, which you can enter like this, without writing space:

header,div.bottom

You can use global selectors, or set specific selectors for the current slider only.

Frequently asked questions

Can I set the full page layout to use % height?

The Full Page responsive mode has a Decrease height by selectors feature which you can use to exclude certain element's height from your slider's.

The trick you could do is, that you could make an element, which wouldn't be visible, it would have an absolute or fixed position with some low z-index, it wouldn't have anything inside it, just make it to have the percentage height you want to remove.

Create a new, empty div, like:

<div id="slider-helper" style="position:fixed; top:0; bottom:66%; z-index:-100;"></div>    

Write #slider-helper into the Decrease height by selectors field, which would make the slider remove the height of this element, and the slider would have 34% height.

Can I set the full page layout to use vh height?

The Full Page responsive mode has a Decrease height by selectors feature which you can use to exclude certain element's height from your slider's.

The trick you could do is, that you could make an element, which wouldn't be visible, it would have an absolute or fixed position with some low z-index, it wouldn't have anything inside it, just make it to have the percentage height you want to remove.

Create a new, empty div, like:

<div id="slider-helper" style="position:fixed; top:0; bottom:74vh; z-index:-100;"></div>    

Write #slider-helper into the Decrease height by selectors field, which would make the slider remove this, and it would have 74vh height.

Is it possible to put a full page slider into the background?

Yes, it's possible but it involves custom coding. So you are required you to have coding knowledge to be able to achieve it. If you don't have such knowledge, hire a developer who can make the changes for you.

If your template/theme doesn't have anything else in there, then you could put your full page slider into the background to be in a fixed position behind everything with this code, just put it right after the <body> part of your website.

WordPress: probably into the header.php file of the theme

<div style="position:fixed;top:0;bottom:0;left:0;right:0;z-index:-1;">
<?php echo do_shortcode("[smartslider3 slider=16]"); ?>
</div>        

Joomla: probably into the index.php file of the template

<div style="position:fixed;top:0;bottom:0;left:0;right:0;z-index:-1;">
<jdoc:include type="modules" name="bgsliderposition" />
</div>        

Why does the full page slider have empty space at the right?

This kind of problem happens if you are displaying only our Fullpage slider on a page, so nothing more, you might experience an issue, that there is an empty space on the right side:

This space happens, because we are using JavaScript to figure out how big your browser's screen is and we are adjusting the Fullpage slider to that size. But because of this, on page load you might have a scrollbar on the right, which disappears after your page finished loading, as you don't have other contents to scroll to, just the JavaScript code returned the page's width while the scrollbar took some of the space. We made a couple options to avoid having this issue:

Hide scrollbar: at the Slider settings → Developer tab you can find a Hide scrollbar option, which puts an overflow:hidden; CSS code on the <html> and <body> tag of your website, which should hide the scrollbar even on page load.

Delayed loading: at the Slider settings → Loading tab you can find a Delayed (for lightbox/tabs) option, which makes the slider do its calculations at a later time, not right away on page loading. This option by itself probably won't be enough, but combining it with the previous option could help.

Trigger resizing with JavaScript: You can put this code to the JavaScript callbacks option to trigger the resizing of your slider after the given time:

window.onload = function(){
  setTimeout(function(){
    var sliders = document.getElementsByClassName('n2-section-smartslider'), id = 0;
    for(i = 0; i < sliders.length; i++) {
      id = sliders[i].dataset.ssid;
      _N2.r('#n2-ss-' + id, function() {
        _N2['#n2-ss-' + id].responsive.doResize();
      });
    }
  }, 300);
}

window.addEventListener("resize", function(){
  setTimeout(function(){
    var sliders = document.getElementsByClassName('n2-section-smartslider'), id = 0;
    for(i = 0; i < sliders.length; i++) {
      id = sliders[i].dataset.ssid;
      _N2.r('#n2-ss-' + id, function() {
        _N2['#n2-ss-' + id].responsive.doResize();
      });
    }
  }, 300);
});

This could help, because if you use this code what would happen is, that your slider loads with that space on the right, but then there wouldn't be a scrollbar anymore, so after 300 milliseconds this code would retrigger the calculations and that should give a good result. You could try to change the 300ms to get the optimal result.

Can I set the full page layout to use vh or percentage height?

The Full Page responsive mode has a Decrease height by selectors feature which you can use to exclude certain element's height from your slider's.

The trick you could do is, that you could make an element, which wouldn't be visible, it would have an absolute or fixed position with some low z-index, it wouldn't have anything inside it, just make it to have the percentage height you want to remove.

Create a new, empty div in your theme/template, like:

<div id="slider-helper" style="position:fixed; top:0; bottom:70vh; z-index:-100;"> </div>	

Write #slider-helper into the Decrease height by selectors field, which would make the slider remove this, and it would have 70vh height. You can make your slider have percentage height with the same method, just instead of vh use the % unit.

Is it possible to put a full page slider into the background?

Yes, it's possible but it involves custom coding. So you are required you to have coding knowledge to be able to achieve it. If you don't have such knowledge, hire a developer who can make the changes for you.

If your template/theme doesn't have anything else in there, then you could put your full page slider into the background to be in a fixed position behind everything with this code, just put it right after the <body> part of your website.

WordPress

Put the slider's PHP code probably into the header.php file of the theme.

For example:

<div style="position:fixed;top:0;bottom:0;left:0;right:0;z-index:-1;">
<?php echo do_shortcode("[smartslider3 slider=16]"); ?>
</div>	

Joomla

Put the slider's PHP code probably into the index.php file of the template, or just create a new module position there.

For example:

<div style="position:fixed;top:0;bottom:0;left:0;right:0;z-index:-1;">
<jdoc:include type="modules" name="bgsliderposition" />
</div>