Fullscreen

☝️ Note: This control is only available in the Pro version!

In this article

You can find this control at Slider settings → Controls tab. It's only available for the Simple slider type.

⚠️ Warning: iPhone does not support the full screen API, so we only suggest using this control with the Hide on - Mobile setting!

Configuration

A button to make your slider full screen. It's good for watching big images without screen limitations, or to make a presentation.

To normal

Choose one of the full screen buttons. You can pick your own image, too.

Color

The color of the fullscreen button.

Mirror

If it's turned on, the full screen play button will be the same as the pause button, if not, then you can select a different one.

Fullscreen style

You can customize your button in here.

Position

Pick a position, where you would like to have your full screen button in your slider.

  • Stack - The order of the controls, which you put into the same position.
  • Offset - This is how far your full screen button will be from the selected position. If you change to Advanced mode, you can specify the position, and here you will be able to use our control variables too.
Desktop/Tablet/Mobile size

Your fullscreen control will be scaled to these numbers for Desktop, Tablet and Mobile view. 1 is the original size ratio.

Shows on hover

This option will make your fullscreen control only appear on desktop screen, when you hover your cursor over the slider. On tablet and mobile screen they will always be seen.

Hide on

You can make your fullscreen control invisible on Desktop, Tablet or Mobile view.

Hide on slides

You can hide your fullscreen control on specific slides separated by commas. Use the slide index (1 = first slide) instead of the slide ID.

☝️ Note: If you want to have some layers on your slider, which would only show on fullscreen, check out this documentation.

Frequently asked questions

1
How to make a layer show up only in full screen view?

While there are no options to show/hide layers in full screen view, with a bit of custom coding you can achieve this behavior.

  1. Add a custom CSS class to your layer, e.g.: .showinfull
  2. Hide your layer on every device
  3. Go to Slider settings → Developer tab and paste this code to the CSS field:
    .n2-ss-in-fullscreen .showinfull{
    display:block!important;
    }
    		
  4. This will make every layer which has the showinfull class visible when the slider is in full screen mode.

2
Other elements are on top of the slider in iPhone

The problem is that iPhones don't support full screen API. Because of this the full screen behavior is achieved by putting the slider to position:fixed; and increasing it's z-index. Due to the way z-index works, other elements of your page might have higher z-index than the slider, so these other elements can be on top of the slider.

To hide these elements, you need to write your own CSS codes what we do not support! Hide the elements which cover the slider when the slider is in full screen mode. When the slider is in full screen mode, it puts a n2-in-fullscreen class to your site's HTML element, which you can use to apply your codes.

If you don't want to custom-code, we recommend hiding the Full screen control on mobile.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.