Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
WordPress Fullscreen Slider

How to Create a WordPress Fullscreen Slider

by Waseem Abbas on July 24, 2017 | Reader Disclosure

Do you want to add a fullscreen responsive slider on your site? Sometimes you want to show your image slider on fullscreen background in WordPress. In this tutorial, we will share how to create a WordPress fullscreen slider.

WordPress fullscreen responsive slider will engage your visitors and allow them to enjoy every detail of your images to their fullest. WordPress doesn’t have an option to create fullscreen sliders by default, but you need to use an image slider plugin like Soliloquy to create a full page slider in WordPress.

To create a WordPress fullscreen slider, you’ll need to follow these 5 steps:

  • Step 1. Install and activate Soliloquy slider plugin
  • Step 2. Install and activate the Lightbox addon
  • Step 3. Create an image slider on your site with Soliloquy
  • Step 4. Go to lightbox settings and enable it
  • Step 5. Add your WordPress fullscreen slider to a page/post

By the end of this tutorial, you’ll be able to create a fullscreen image slider on your site that will look as shown in this demo below:

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy Slider Plugin

The first thing that you need to do is to install and activate Soliloquy Image Slider plugin on your WordPress site.

Soliloquy website

To learn more about plugin installation, you should check out this guide on how to install Soliloquy in WordPress.

Step 2: Install and Activate the Lightbox Addon

Upon activating the plugin, you need to go to Soliloquy » Addons. Simply install and activate the Lightbox addon here.

Install Lightbox Addon

Once the addon is activated, you should create the image slider on your site using Soliloquy.

Step 3: Create an Image Slider on Your Site With Soliloquy

To create an image slider, you should go to Soliloquy » Add New from your WordPress admin. Simply add the title and image slides in the Native Slider section.

Add Images

You should check out this guide on how to create an image slider in WordPress to learn more about WordPress slider settings.

Step 4: Go to Lightbox Settings and Enable it

After adding the images, you should scroll down to Lightbox tab and check mark on Enable Lightbox option.

Enable Lightbox Slider

When you enable lightbox, you’ll see the settings below to setup your responsive fullscreen background slider. You can add a lightbox theme, make your lightbox supersize, set the caption position, load videos and more.

Lightbox Settings

It also allows you to set the width and height of your fullscreen image slider. Now click on the Publish button and your full page image slider is ready.

Step 5: Add Your WordPress Fullscreen Slider to a Page/Post

Once published, you need to copy the shortcode from Soliloquy Slider Code widget to add this simple fullscreen responsive slider on your WordPress page/post.

Copy Shortcode

Next you should go to Pages/Posts » Add New and paste the shortcode in the visual editor.

Paste Shortcode

Make sure to hit the Update button. Now visit your site to see the fullscreen slider in WordPress that’ll look like as shown in this image below:

lightbox popup demo

That’s all. You can change or adjust any lightbox settings according to your need.

We hope this tutorial has helped you to learn how to create a WordPress fullscreen slider on your site. If this is perhaps not quite what you’re looking for and you would rather have a full width slider instead, please check out our article on How to Create a Fullwidth Image Slider in WordPress.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress tips and resources.

Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.

Comments

    Dan Mahoney

    July 3, 2019

    I’m totally confused by this tutorial. The subject is how to create a “fullscreen” slider, which I take to mean an image slider where the images are 100% of the width and height of the display. Instead, the tutorial goes through the steps to create a slider with a lightbox. Even the examples shown, including the “By the end of this tutorial…” slider, are not fullscreen sliders; just a small image sliders with a lightbox. The only thing that is fullscreen is the overlay for the lightbox images.

    I thought the tutorial would show how to use the lightbox option as a workaround to achieve fullscreen images, but it does not. What am I missing?

    Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.