How to Create a Fullwidth Image Slider in WordPress
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:
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.
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.
It will open a popup where you need to select Insert HTML Slide from left sidebar.
You need to add the HTML slides in this popup with this simple code:
[php]<div id="wrapper-1">
</div>
[/php]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.
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:
[php]#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.
Now go to Posts » Add New or edit an existing post. Paste the shortcode in the visual editor to display the fullwidth slider.
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:
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.
Related Posts
