Add a beautiful Image Slider to your Divi website. This module is highly customizable and can be even used for fullwidth hero sliders! Add title, description and button for each image and customize all elements with a bunch of the powerful settings available in this module. Change thumbnails navigation style, position, add arrow navigation, image overlay and more! Create amazing image galleries with the Divi Pixel Image Slider module.
The Divi Pixel Image Slider module offers powerful settings which can help you display your galleries in an engaging and beautiful way. This module is a great addition to any website where images play a big role.
In the Content tab, we can upload images. There are also 2 toggles for Thumbnails Carousel and Main Image Carousel. This is where we can configure our thumbnails carousel and Main Image Carousel navigation and animation.
Select thumbs alignment. We can select vertical or horizontal alignment. When vertical alignment is selected, thumbnails navigation will be displayed vertically at the bottom/centre or top.
This control allows us to define how many thumbnails will be displayed on desktop, tablet and mobile.
Space Between Thumbs
Define space between thumbs on all devices.
This option allows us to configure thumbnails container width.
Define the height of the thumbnails navigation.
Thumbs Vertical/Horizontal Placement
Depending on Thumbs Alignment selected, we can display our thumbs at the top/centre/bottom or left/centre/right.
Float Thumbs Over Main Image
Enable this option to place the thumbs over the image. When this option is enabled we can also select the horizontal and vertical placement of the floating thumbnails navigation.
Enable this option to display navigation for thumbnails
Show Navigation on Hover
Enable this option to show navigation on mouseover only.
By default, the active thumbnail is the first thumbnail in the row/column. By enabling this option, we can make the active (highlighted) thumbnail centered.
In the Main Carousel toggle we can enable navigation and select 1 of 4 predefined animations for the Main Image Slider.
Enable Navigation on Main Image
Enable this setting to display navigation on the Main Image Slider
Show Navigation on Hover
When Navigation for the Main Image Slider is enabled, we can also show it on hover only.
The Divi Pixel Image SLider comes with 4 animations. We can select Slide/Fade/Flip and Cube.
In the Design tab, we can find 2 toggles for navigation customization (Thumbs Navigation and Main Image Navigation). Both these toggles have the same settings but one is for Thumbnails Navigation and the other for Main Image Navigation.
Prev Nav Custom Icon
Enable this option to display a custom icon for the previous navigation.
Next Nav Custom Icon
Enable this setting to display a custom icon for the next navigation
Tweak this setting to adjust navigation icon size.
Customize this setting to adjust navigation icon padding.
This setting allows you to change the navigation icon color.
If you want to display boxed navigation, select background color.
Enable this setting to make your navigation circle.
Horizontal Navigation Position
Customize this setting to adjust the horizontal navigation position.
Vertical Navigation Position
Customize this setting to adjust the vertical navigation position.
In the sizing tab, we can configure our Image Slider width and height on specific devices. It’s important to set the height for desktop, tablet and mobiles, so our Image Slider will look and perform well on all devices.
In the Spacing toggle, we will find the native Divi settings for module margin and padding, but we can also find Thumbs Container Padding. This is where we can control spacing for the Thumbnails Navigation.
In this toggle, we can customize the Thumbnails appearance. We can add a border, control border-radius and width, add and customize thumbnails box shadow.
Image Slider Child Module
Each image added to our carousel have its own settings where we can add content, image overlay, customize texts, button and content spacing.
In this toggle, we can add image and Image Alt Text.
In this toggle, we can enable content for our image and add title, description and button. We can also select Content Horizontal and Vertical placement, button target link, enable Show Overlay settings and select Content Animation.
Each child module (slide image) can be customized in the Design tab.
In this toggle, we can customize the slide image title and description.
Content Sizing & Spacing
In this toggle, we can control content spacing and width for all devices.
In this toggle, we can customize Image Overlay. To use this setting, the Show Overlay option must be enabled in the Slide Image Content toggle.
Here we can change text alignment, theme color (Light/Dark) and add text shadow to our texts.
In this toggle, we customize our slider image button when it’s enabled. We can adjust button text style and customize button appearance (colors, border, icon, spacing and box shadow).