How to Create Fullwidth Image Gallery Slider

There are several various methods of creating sliders such as these, including embedding a simple Lightbox function in your website. With Divi Builder and Divi Pixel Carousel module, this can be achieved in a few simple steps. The Image module available in the Divi Builder offers Lightbox function, while the Divi Pixel Carousel module can display Divi Library items. It offers multiple slider settings such as number of columns, overflow 3D effect, spacing and full customization.

All we need to do is to create multiple Divi Library items with the Image module in them and then select individual images to be displayed in the Carousel child modules. In this tutorial, I will show you how to build a nice, fullwidth slider with images, that will open in a lightbox after clicking. You can follow this tutorial, or download a free section, which can be imported to your Divi Library and used on your website in no time.

Add new Divi Library items

In this first step we will add a new Divi Library item with the Image module. We will also customize the module to add hover effect and remove unwanted spacing.

1. Go to Divi → Divi Library
2. Click Add New button located at the top
3. Select Module for the Layout Type and add Layout Name and Category (optionally)
4. Click Send

1. Click Add New Module
2. Search for “image” in the search field
3. Click Image module to add it to your layout

1. Click Add Image and select the image from your Media Library
2. Open Link toggle and enable Open in Lightbox option
3. Go to Design → Filters and set 90% Contract for the default and 110% for Hover
4. Go to Design → Transform toggle and set Scale to 102% on mouseover
5. Click Update button to save your layout

Duplicate Carousel Image layout

Of course, we need more images for our image gallery slider. We could manually add more images and apply styles as in step one, but I recommend using Post Duplicator plugin to save time. After installing it on your website, you will be able to easily duplicate the Divi Library items, by clicking the “Duplicate Post” link.

Use this function to create as many images as you want.

1. Go to Plugins in your WP Dashboard and click Add New
2. Type Post Duplicator in the search field
3. Click Install and Activate

1. Go to Divi → Divi Library
2. Mouseover the layout we have created and click Duplicate Post

1. Open the new duplicated layout and edit the layout name
   
2. Click on the Image toggle icon to open Image module settings
   
3. Upload a new image for the slider
4. Click Save Change and Update button to save the layout

*Repeat these steps for all images you want to display in the Carousel module.

Add and customize the Carousel module

In this final step, we will add the Divi Pixel Carousel module to the page. We will also add our saved layouts as child modules. We also need to make the row fullwidth, tweak column numbers, grid spacing, navigation style and carousel container padding.

1. Open a page where you want to display the gallery slider and click Add New Row
2. Select 1 column layout 
3. In the modal box type Carousel in the search field
4. Select Pixel Carousel to add it to the page

1. In the Carousel module settings click Add New Item
2. Add an Admin Label
3. Select Divi Library in the Content Type dropdown
4. Select Carousel Image 01 in the Divi Library field
5. Repeat these steps to add all images to the Carousel module

1. Open responsive settings for Number of Columns and set: Desktop 4, Tablet 2 and Mobile 1
2. Set Spacing to 0
3. Enable Loop, Autoplay, Navigation and Show Navigation on Hover

1. Go to Design → Navigation and enable/select custom icons
2. Set Icon Size to 25
3. Set Icon Padding to 20
4. Select black color for the Arrow Color and white for the Arrow Background
5. Set Left/Right Navigation Position to 0.

1. Go to Design tab
2. Open Spacing toggle
3. Set Container Padding to 0
4. Click Save Changes button

Make the Row fullwdith and remove unwanted spacing

Our image gallery slider is almost ready. we still need to make some tweaks in a Row settings, to make the slider full width and remove unwanted spacing.

1. Click on the toggle icon to open Row settings
2. Go to Design → Sizing
3. Set Width to 100%
4. Go to Design → Spacing and set padding to 0

This is it! We hope you enjoy reading this tutorial as well as the free section we are sharing with you. There are more cool tutorials to come, so please make sure to sign up for our newsletter.