How to Create a WordPress Fullscreen Slider
Do you want to show your slider images fullscreen in WordPress? Some photos lose most of their impact at blog-post width — landscapes, products, and portfolio shots all deserve the whole screen. In this tutorial, we’ll share how to create a WordPress fullscreen slider.
WordPress doesn’t have a fullscreen slider option by default, so we’ll use Soliloquy and its Lightbox Addon. Visitors click a slide, and your images open in a fullscreen lightbox they can browse one by one.
To create a WordPress fullscreen slider, you’ll need to follow these 5 steps:
- Step 1. Install and activate Soliloquy
- Step 2. Install and activate the Lightbox Addon
- Step 3. Create an image slider
- Step 4. Enable the lightbox and turn on fullscreen settings
- Step 5. Add your fullscreen slider to a page or post
By the end of this tutorial, you’ll have a slider that opens fullscreen, like this demo (click any slide):
Ready to get started? Let’s go!
Step 1: Install and Activate Soliloquy
First, you’ll need to install and activate the Soliloquy image slider plugin on your WordPress site.
If you’d like a hand with this part, our doc on installing Soliloquy covers it step by step.
Step 2: Install and Activate the Lightbox Addon
Next, go to Soliloquy » Addons. Find the Lightbox addon, click Install, and then click Activate.
The Lightbox Addon is included with the Developer plan or higher. If it isn’t listed on your Addons screen, our doc on upgrading your Soliloquy license explains how to unlock it.
Step 3: Create an Image Slider
Now go to Soliloquy » Add New in your WordPress dashboard. Add a title, then drag your images into the Native Slider section.
Because these images will fill the whole screen, upload large, high-quality versions. Our guide on how to create an image slider in WordPress covers the rest of the slider settings.
Step 4: Enable the Lightbox and Turn On Fullscreen Settings
Scroll down to the Lightbox tab and check the box for Enable Lightbox?
Once the lightbox is on, more settings appear below it. You can choose a lightbox theme, turn on Supersize so images expand to fill the screen, set the caption position, and load videos.
You can also set the width and height of the lightbox images here. When you’re happy with your settings, click Publish.
Pro Tip: Supersize stretches images to fit the screen, so a small photo can turn blurry. Start from images that are at least as wide as a typical laptop screen, and check a few on your own monitor before going live.
Step 5: Add Your Fullscreen Slider to a Page or Post
Once your slider is published, copy the shortcode from the Soliloquy Slider Code widget.
Next, edit the page or post where you want the slider, and paste the shortcode where it should appear.
Click Update, then visit your site and click a slide. Your images open in a fullscreen lightbox, like this:
That’s all there is to it. You can come back and adjust the lightbox settings at any time.
Note: Want the slider itself to stretch edge to edge on the page, without a lightbox? That’s a full width slider rather than a fullscreen one — see our guide on how to create a fullwidth image slider in WordPress.
FAQs About WordPress Fullscreen Sliders
What is the difference between a fullscreen slider and a full width slider?
A full width slider stretches across the width of your page as part of the layout. A fullscreen slider fills the whole browser window, usually by opening images in a lightbox over the page.
How do I make slider images fill the screen in WordPress?
With Soliloquy, enable the Lightbox Addon on your slider and turn on the Supersize option in the Lightbox tab. When a visitor clicks a slide, the image expands to fill the screen.
Why do my fullscreen slider images look blurry?
The source images are smaller than the screen, so they’re being stretched. Upload larger originals, and balance size against speed by compressing them before you upload.
That’s it! We hope this tutorial helped you create a WordPress fullscreen slider. If you’d like to do more with your slider, check out these beginner-friendly guides:
- How to Create a WordPress Slider With Lightbox Popup
- How to Add a Homepage Slider in WordPress
- How to Save Images for the Web in Photoshop to Speed Up Your WordPress Slider
- Fullwidth Slider Showcase
Related Posts
Dan Mahoney
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?
Barbi Atkinson
Hi Dan 🙂 I’m very sorry for any confusion! This full screen is more about the lightbox where as this tutorial about a full width is likely more of what you’re looking for: https://soliloquywp.com/how-to-create-a-fullwidth-image-slider-in-wordpress/
Ready to start creating slides the easy way?
Get Soliloquy NowCookie Consent