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
Share This Post

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. You may also want to check out our guide on how to autostart an image slider in WordPress. If your site is slow, then you should check this ultimate guide to boost WordPress speed and performance.

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

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

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.

[i]
[i]