You are here:Home»KB»Web Design»CMS»Wordpress»Divi Slider Module
Friday, 28 March 2025 13:39

Divi Slider Module

Written by

 

Convert to a Image Carousel / Full Width Image Slider

When trying to do an edge to edge fullwidth image slider in Divi so you can use it as an Image carousel, you might run across some simple problems and below are some solutions to this issue.

The Fullwidth slider and normal slider module behave in the same way and the following methods will work on both of them.

Styling and settings common to all methods

This styles the slider how I want it, which is quite standard.

  • Put an instance of the Divi `Slider`module where you want it
  • Configure these settings as follows:
    • Content --> Elements --> Show Arrows: No
    • Content --> Elements --> Show Controls: No
    • Design --> Spacing --> Padding: 0px 0px 0px 0px;
    • Design --> Animation --> Automatic Animation: On
    • Design --> Animation --> Automatic Animation speed: 7000 (default 7000)
    • Design --> Animation --> Continue Automatic Slide on Hover: Yes
    • Slide --> Content --> Text --> Title: rename to `Slide 1`
      • You can also use a name like `Slide 1 - White House` if you need descriptions for your many slides.
      • We will use CSS to disable this so we can keep the slides title for easier management
    • Slide --> Content --> Text --> Button: remove text
      • can use CSS to disable
    • Slide --> Content --> Text --> Body: remove text
      • can use CSS to disable
    • Slide --> Content --> Background --> Colour: none
  • Save the module
  • Delete all slides but one

Using the Background (Lenoi's Method)

This is the simplest method and easy to do. This whole module is designed for this.

  • Follow the section above called `Styling and settings common to all methods`.
  • Remove the custom gutters, width + max width to 100%  - and this might on be needed on the normal slider module
  • Slide 1
    • Put the image as the background: Slide --> Content --> Background --> Background Image
  • Edit `Slide 1` as follows:
    • Slide --> Content --> Background --> Background Image
  • Add and additional Slide (repeat as required)
    • Duplicate `Slide 1`
    • Change the Title
      • Slide --> Content --> Text --> Title
      • Give the slide a proper name (i.e. `Slide 2` or `Slide 2 - Buckingham Palace`).
    • Change the slider image
      • Slide --> Content --> Background --> Background Image
  • Disable Title and Content with CSS
    • Only the Title needs to be disabled here as the other fields should be empty, but if not this code will hide them.
    • Advanced --> Custom CSS --> Free-Form CSS --> CSS: 
      /* Disable Title and Content */
selector .et_pb_slide_description .et_pb_slide_title,
selector .et_pb_slide_description .et_pb_slide_content {
    display: none;
}
  • Save the module

Using `Image & Video` (Divi Sensei method)

This allows you to use the slider's `Image and Video`in a full width mode using CSS code to do the magic and works for both fullwidth and the normal slider module and is based on Create a Fullwidth Image Slider using the Divi Slider Module | Divi Sensei

  • Follow the section above called `Styling and settings common to all methods`.
  • Edit `Slide 1`
    • Set the slide image: Slide --> Content --> Image & Video --> Image
  • Add an additional Slide (repeat as required)
    • Duplicate `Slide 1`
    • Change the Title
      • Slide --> Content --> Text --> Title
      • Give the slide a proper name (i.e. `Slide 2` or `Slide 2 - Buckingham Palace`).
    • Change the slider image
      • Slide --> Content --> Image & Video --> Image
  • Apply the required CSS
    • Method 1 - Global CSS
      • Add this CSS to: Divi --> Theme Options --> General --> Custom CSS 
        /* Convert Slider module into an Image Carousel (Divi Sensei, Cleaned) - Just add .full-image-slider to your slider - Original */

.full-image-slider .et_pb_slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.full-image-slider .et_pb_slide:first-child .et_pb_slide_image img.active {
    animation: unset !important;
}

.full-image-slider .et_pb_container {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

.full-image-slider .et_pb_slide_image img {
    max-height: none !important;
    width: 100% !important;
}

.full-image-slider .et_pb_slide_image {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
    -webkit-animation-name: fade !important;
    -moz-animation-name: fade !important;
    -ms-animation-name: fade !important;
    -o-animation-name: fade !important;
    animation-name: fade !important;
}

.full-image-slider .et_pb_slider_container_inner {
    position: relative;
}

.full-image-slider .et_pb_slide_description {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right:  0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

.full-image-slider .et_pb_slide_description .et_pb_button_wrapper,
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper a,
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper a:hover {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(0, 0, 0, 0) !important;  
    border: none !important;
    background: none !important;
}

.et_pb_column.et_pb_slider_fullwidth_off.full-image-slider .et_pb_slide_description .et_pb_slide_title,
.et_pb_column.et_pb_slider_fullwidth_off.full-image-slider .et_pb_slide_description .et_pb_slide_content,
.full-image-slider .et_pb_slide_description .et_pb_slide_title,
.full-image-slider .et_pb_slide_description .et_pb_slide_content {
    display: none;
}
      • Add the following CSS class to each slider you want to transform 
        full-image-slider
    • Method 2 - Selector
      • Add the following CSS to each slider module you want to transform to: Advanced --> Custom CSS --> Free-Form CSS --> CSS 
        /* Convert Slider module into an Image Carousel (Divi Sensei) - Adapted to use Free-Form CSS */

selector .et_pb_slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

selector .et_pb_slide:first-child .et_pb_slide_image img.active {
    animation: unset !important;
}

selector .et_pb_container {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

selector .et_pb_slide_image img {
    max-height: none !important;
    width: 100% !important;
}

selector .et_pb_slide_image {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
    -webkit-animation-name: fade !important;
    -moz-animation-name: fade !important;
    -ms-animation-name: fade !important;
    -o-animation-name: fade !important;
    animation-name: fade !important;
}

selector .et_pb_slider_container_inner {
    position: relative;
}

selector .et_pb_slide_description {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right:  0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

selector .et_pb_slide_description .et_pb_button_wrapper,
selector .et_pb_slide_description .et_pb_button_wrapper a,
selector .et_pb_slide_description .et_pb_button_wrapper a:hover {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(0, 0, 0, 0) !important;  
    border: none !important;
    background: none !important;
}

selector .et_pb_slide_description .et_pb_slide_title,
selector .et_pb_slide_description .et_pb_slide_content {
    display: none;
}
  • Disable Title and Content with CSS
    • This is done with the CSS code above. Edit as required
  • Save the module

Notes

  • Make sure you remove the background colour on each slide to stop it flashing up between images and page load. I choose transparent (i.e. none) when getting the blue background.
  • My fullwidth image slider is only a thin line instead of a proper image.
    • This is caused by unwanted or incorrect padding
    • Fullwidth Slider --> Design --> Spacing --> padding
      • Below is the default CSS for the description which is also the padding parameter of the Fullwidth slide module.
        .et_pb_slide_description, .et_pb_slider_fullwidth_off .et_pb_slide_description {
  padding: 16% 8%;
  width: auto;
  margin: auto;
}
      • It is the description defaults that give the image slider its height and therefore the background and the corresponding image.
      • Don't use `Padding: 0px 0px 0px 0px` as this will give you the thin line issue.
      • I think this code is controlled with the slide DIV
    • Fullwidth Slider --> Design --> Spacing --> Margin
      • The is no margins by default and therefore no corresponding CSS code by default.
      • When you add a margin to the slider moduel you get the following CSS code added. 
        .et_pb_fullwidth_slider_0_tb_header {
  margin-top: 471px !important;
}
      • This CSS code is added to the modules boubdry DIV

 

Code

Constant Image Size

It is best to use images of the same dimensions when making a slider but if you cannot for some reason then use the following code to make images with different sizes all display with a constant dimensions:

Advanced --> Free-Form CSS --> CSS

/* set the height of the slide image*/
selector .et_pb_slide_image img {
    width: auto;
    height: 600px; 
    object-fit: cover;
}

 

Custom Gallery Arrows

/* Custom Gallery Arrows */
.et-pb-arrow-prev::before {
    content: "4";
    background-color: #24bca4;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
}

.et-pb-arrow-next::before {
    content: "5";
    background-color: #24bca4;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
} 

 

Links

 

Read 186 times Last modified on Tuesday, 01 April 2025 13:18
Published in Wordpress
back to top