The Divi Theme's gallery module has two layout options: grid and slider. When the slider layout is active, the gallery shows one image at a time (and you can move from one to the next with arrow buttons). If you'd like to have the gallery slider display two images at a time, this post explains how to do it.
First, here's an example of the effect we're aiming for – one gallery module in slider layout displaying two images at a time:
Show 2 Gallery Images at a Time using CSS
One way to get 2 gallery images showing at a time is to force the currently displayed slide to take up only 50% of the available width and then force the next slide to be displayed in the remaining 50% space.
To do this using CSS, first set "Gallery Settings > Advanced > CSS ID & Classes > CSS Class" to:
gallery-two-at-a-time
Then add this CSS to your site:
/* Display two gallery images */
@media only screen and (min-width: 981px) {
/* Set images to 50% width */
.gallery-two-at-a-time .et_pb_gallery_item {
max-width: 50%;
}
/* Force display of the image after the currently displayed one */
.gallery-two-at-a-time .et-pb-active-slide + .et_pb_gallery_item {
display: block !important;
opacity: 1 !important;
z-index: 1 !important;
left: 50%;
}
/* Display the first image at the end */
.gallery-two-at-a-time .et_pb_gallery_item:first-child:not(.et-pb-active-slide) {
display: block !important;
opacity: 1 !important;
z-index: 0 !important;
left: 50%;
}
}Related Post: Adding CSS to the Divi Theme
Hey Dan, this is really a great tweak. I was looking for something like this to edit the gallery slider and make it look like a carousel slider. I tried to edit your css to show 3 images at a time but my skills seam to be too poor for that. Could you give me a hint possibly?
Best regards and keep up the good work!
Hey Robert, sorry I'm only just responding. I been playing around with this, but I don't think it's actually possible to modify the two images at a time CSS to work with three images. The reason is that CSS don't support rich enough logic to allow handling of the edge cases where we need to move the first and second slides to the end when the last one is active. I think a different approach will be needed, possibly using either flexbox's ordering or javascript to handle these edge cases. I'll try to spend some more time on this as soon as I can and will update here if I'm able to figure anything out. Cheers!