Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
Fullwidth Image Slider in WordPress

How to Create a Fullwidth Image Slider in WordPress

by Waseem Abbas on November 9, 2017

Do you want to add an image slider from edge to edge on your screen? Sometimes the WordPress theme has fullwidth pages, and it’s better to create sliders accordingly. In this tutorial, we will share how to create a fullwidth image slider in WordPress.

By default, you can’t add a fullwidth image slider on your site. You need to make sure that your WordPress theme supports fullwidth pages to display your slides from edge to edge on the screen.

It is recommended to use Soliloquy as your slider plugin that has tons of great features to help create a slider you need.

To create a fullwidth image slider in WordPress, you’ll need to follow these 4 steps:

  • Step 1. Install and activate Soliloquy slider plugin
  • Step 2. Create a new image slider from other sources
  • Step 3. Add the additional CSS for fullwidth setting
  • Step 4. Publish and display the fullwidth image slider

By the end of this tutorial, you’ll be able to create an image slider with fullwidth photos that will look like as shown in this image below:

Fullwidth Image Slider

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy Slider Plugin

The first thing you need to do is to install and activate Soliloquy slider plugin on your WordPress website.

Soliloquy website

For any assistance, you should check out this guide on how to install Soliloquy in WordPress.

Step 2: Create a New Image Slider From Other Sources

Once this plugin is activated, you should go to Soliloquy » Add New from your WordPress admin backend to create the new slider. Add the title and click on the Select Files From Other Sources button.

Select Files

It will open a popup where you need to select Insert HTML Slide from left sidebar.

Insert HTML Slide

You need to add the HTML slides in this popup with this simple code:


<div id="wrapper-1">

&nbsp;

</div>

In this code, wrapper-1 is the ID that will connect with the CSS to display your slider image. You can add as many HTML slides with the similar code. However, the ID should be different for each slide. (For example, the other HTML slides will have the Div ID as wrapper-2, wrapper-3, etc)

We created four slides in this tutorial, so we will have four IDs (wrapper-1, wrapper-2, etc) to attach images to. You can add as many slides you need by adding the IDs accordingly.

Next you need to go to Config tab. In the Image Size dropdown, simply select Full Width and change the slider dimensions to 3000 x 400 px.

Config Settings

Make sure to hit the Publish button.

For basic slider settings, you should check out this guide on how to create an image slider in WordPress.

Step 3: Add the additional CSS for Fullwidth Setting

To add the CSS, you should go to Appearance » Customize. In the Additional CSS section, you need to paste this code snippet:


#wrapper-1 {

   background:url("sunrise-phu-quoc-island-ocean.jpg") no-repeat scroll center center transparent;
   background-size: cover !important;
   height: 400px;
   width: 100%;
}

#wrapper-2 {

   background:url("sea-sunset-beach-couple.jpg") no-repeat scroll center center transparent;
   background-size: cover !important;
   height: 400px;
   width: 100%;
}

#wrapper-3 {

   background:url("sea-nature-sunny-beach.jpg") no-repeat scroll center center transparent;
   background-size: cover !important;
   height: 400px;
   width: 100%;
}

#wrapper-4 {

   background:url("pexels-photo.jpg") no-repeat scroll center center transparent;
   background-size: cover !important;
   height: 400px;
   width: 100%;
}

You need to replace the image URLs with the URLs of your slides in this CSS. The other CSS should remain same. These IDs will display the fullwidth images with your Soliloquy slider settings.

Step 4: Publish and Display the Fullwidth Image Slider

You need to copy the shortcode from the Soliloquy Slider Code widget in your slider.

Copy Shortcode

Now go to Posts » Add New or edit an existing post. Paste the shortcode in the visual editor to display the fullwidth slider.

Paste Shortcode

Make sure to Publish/Update the post.

You can now visit your site to see the fullwidth WordPress slider that will look like as shown in this image below:

Fullwidth Image Slider

We hope this tutorial has helped you to learn how to create a fullwidth image slider in WordPress. You may also want to check out our guide on how to create a WordPress fullscreen slider. In case, your slider images are not ranking in the search engines, you should check this ultimate WordPress SEO guide.

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

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]