Awesome Elementor Justified Image Gallery Carousel

Table of Contents

Learn how to create an Elementor justified gallery slider. Simply follow the simple steps below!

See the demos here.

Method 1. The Simple Version (with same width for all images)

To begin with, create your Elementor image carousel

That will be the justified carousel gallery.

Awesome Elementor Justified Image Gallery Carousel 1

 

Then, add the code below under Advanced > Custom CSS

   selector img.swiper-slide-image {
    object-fit:cover;
    object-position: center center;
    height: 600px;
}

Awesome Elementor Justified Image Gallery Carousel 2

 

Now, adjust the code to fit your Elementor gallery design

If you want the image carousel to be 300px tall, for example, change the 'height' value to '300px'. You can also set a value in vh , such as 100vh for a full screen justified gallery carousel.

You can modify the object-position also, although you usually would not really have to change this. Watch the video to learn more about that property!

Finally, enjoy your new Elementor Justified Gallery Carousel!

If you have Elementor free, this will still work! Simply change the word 'selector' , in the code, with '.carouseljustified' , and add the CSS to your page. Also give your image carousel the CSS class 'carouseljustified' ! Learn more about how to add CSS to Elementor free websites.

Awesome Elementor Justified Image Gallery Carousel 3

Method 2. For Custom Width Images Elementor Justified Carousel

This is compatible with ACF gallery field. So it can be a dynamic justified image carousel.

To start with, setup your section and columns settings

Set the section to 'full-width', and set the column horizontal align to 'space-between', and set the widget spacing to '0'.

Awesome Elementor Justified Image Gallery Carousel 4

Awesome Elementor Justified Image Gallery Carousel 5

Then, create your image gallery using the 'basic gallery' element

Set Image Size to 'full', and Columns to '1'.

Awesome Elementor Justified Image Gallery Carousel 6

Under 'Advanced' , give your basic gallery the class name 'justified_gallery'.

Awesome Elementor Justified Image Gallery Carousel 7

Now, add this code to an html element

Awesome Elementor Justified Image Gallery Carousel 8

  
<style>
:root{
--swiper-height:600px;
--swiper-nav-margin:-300px; /*negative value of half the swiper height */
}
.elementor-element.swipee-left, .elementor-element.swipee-right{
z-index: 99;
cursor: pointer;
line-height: 0;
margin-top: var(--swiper-nav-margin);
transform: translateY(-50%);
height: fit-content;
}
.justified_gallery .swiper-paginatione {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(1.4);
    z-index: 9;
    bottom: 0;
    width: auto;
}
.justified_gallery .swiper-slide img {
object-fit: cover;
height:var(--swiper-height);
}
.justified_gallery .elementor-image-gallery .gallery-item {
width: auto;
}
.elementor-editor-active .ready{
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {

let parent = document.querySelector('.justified_gallery .gallery');
let children = parent.querySelectorAll('.justified_gallery .gallery-item');
let wrapper = document.createElement('div');
wrapper.className = 'swiper-wrapper';

children.forEach((childe) => {
wrapper.appendChild(childe);
childe.classList.add('swiper-slide');
});

let container = document.createElement('div');
container.className = 'swiper-containere';

container.prepend(wrapper)

parent.prepend(container);

let pagination = document.createElement('div');
pagination.className = 'swiper-paginatione';
container.prepend(pagination);

var swipere = new Swiper('.swiper-containere', {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-paginatione',
clickable: true,
},
navigation: {
nextEl: '.swipee-right',
prevEl: '.swipee-left',
},
});
});

</script>

After this, create your right and left navigation arrows using the 'icon' element

You can use the icon you want! Even your own SVG!

All you need is to give the left navigation the class name 'swipee-left', the right navigation the class name 'swipee-right'.

Awesome Elementor Justified Image Gallery Carousel 9

And set the width to both of them to 'inline' , under Advanced > Positioning

Awesome Elementor Justified Image Gallery Carousel 10

Finally, enjoy your new Elementor Justified Image Slider!

Let me know if you have any questions or if you need help with anything! Subscribe to my newsletter for more great designs like this!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments