Show 2 Images at a Time in the Gallery Module Slide Layout

This post may contain referral links which may earn a commission for this site

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%;
	}
}

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *