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-height-mobile:174px;
--swiper-nav-margin:-300px; /*negative value of half the swiper height */
--swiper-nav-margin-mobile:-121px; /* positioning of nav arrows for mobile */
}
.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-wrapper , body:not(.elementor-editor-active) .justified_gallery .gallery{
height:calc( var(--swiper-height) + 30px);
}

.justified_gallery .swiper-paginatione {
position: absolute;
left: 50%;
transform: translateX(-50%) scale(1.4);
z-index: 109;
bottom: 0;
width: auto;
}
.justified_gallery .swiper-slide img {
height:var(--swiper-height);
width: auto;
}
.justified_gallery .elementor-image-gallery .gallery-item {
width: auto;
max-width: unset;
}
@media (max-width:767px){
.justified_gallery .swiper-wrapper, body:not(.elementor-editor-active) .justified_gallery .gallery {
height:calc( var(--swiper-height-mobile) + 30px);
}
.justified_gallery .swiper-slide img {
height:var(--swiper-height-mobile);
}
.elementor-element.swipee-left, .elementor-element.swipee-right{
margin-top: var(--swiper-nav-margin-mobile);
}
}
.elementor-editor-active .ready{
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (jQuery('#gallery-1')){
jQuery('#gallery-1').attr('id','');
}

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!

Comments

45 Responses

  1. Hello, the contribution of this gallery is excellent. It works perfect, but if I need to include this same gallery 3 times in the same section it causes conflict. Any suggestion?

    1. Did you use method 1 or method 2 ? Probably method 2.

      You will need to give each of them a different class name, and then duplicate the code and adjust it to reflect the new class name of the other 2 galleries.

      so you would change all instances of .justified_gallery to .justified_gallery2 and .justified_gallery3 , everywhere in the copy pasted code.

  2. Thank you so much for this, it worked perfectly! I used the 2nd method and I was wondering, is there a way to change the appearance of the navigation dots? I also want it to show captions too, if possible

    1. Hello Tangmo! Glad it worked good for you! to show captions, simply set it as you normally would, in the Basic Gallery element settings.

      Then, change that code

      .justified_gallery .swiper-wrapper , body:not(.elementor-editor-active) .justified_gallery .gallery{
      height:calc( var(--swiper-height) + 30px);
      }

      to this

      .justified_gallery .swiper-wrapper , body:not(.elementor-editor-active) .justified_gallery .gallery{
      height:calc( var(--swiper-height) + 90px);
      }

      It will allow enough space for the caption to show properly. You will also want to adjust the

      --swiper-nav-margin: 300px

      value. This correspond to the positioning of the navigation arrows, for desktop.

      To chagne the dots appearance, some custom work would be needed... no simple way. If you just want to change their size, you can play with the scale value here

      transform: translateX(-50%) scale(1.4);

      I hope this helps!

    1. To let other readers know, I helped Ethyl and was able to get it working. She was using the new Elementor V 3, and a few fixes were needed in my code for compatibility.

      I updated my code provided here as well. Now, it should work for every Elementor version!

  3. Hello, this tutorial was amazing but I am having issues with it on the mobile. the images are not in a box, they are all displayed horizontaly accross the page on mobile. Anyway to fix this please?

    1. Surabhi Gupta 30photos, that's normal.. it's how swiper works. To fix the overflow problem, go in the Section settings (the elementor section that contains this swiper) , then set 'Overflow' to 'Hidden' . It will fix this right away!

      And your website is amazing... such beautiful photos!

    2. Maxime Desrosiers that fixed it! thanks so much Maxime, you are amazing! And thanks so much for your kind words regarding my work. Building the website has been hard but so rewarding. Couldnt have done it without amazing articles from genuinely helpful people like yourself <3

  4. Aloha Maxime! I did everything you outlined here but the images are stacked in one column, all the same width (just like on your video), but I want the images all in one row, all the same height, while keeping their individual aspect ratios or full images (also like in your video). I'm trying to create a justified image carousel for photos that scrolls left and right.
    I'm using Elementor v3.0.15, Elementor Pro v3.0.9.
    Mahalo for your help!

    1. With Method 2, it should work fine... If it doesn't I would need to check the page to have an idea why it's not working.

    2. Ken Robertson When I visit, it's not working and I get an error. I actually realised a ' ; ' character needed to be added somewhere in my code. I updated it now, so it should fix the swiper not working ifi you change to my updated code....

      I don't know if it will fix the panorama image though... Maybe you will need to resize it to make it fit..

    3. Maxime Desrosiers I just noticed the panorama changes width as I resize the browser window. Any idea what width I should resize the image to? All other images work fine. I'll play with resizing but I don't no what principle to follow for a sensible width/solution...

    4. I looked on a tablet and smartphone and the pano width is squished to fit each screen. It seems that it would need to be set to a much smaller height to fit the full width to all these screens, but that would make all the other images quite small as all would adjust to that same height. Is there a way to allow the image to bleed off the screen thus needing to scroll left or right to view it all?

      If not then it seems I would need to crop the image to an appropriate aspect ration so it fits at full width while matching the heights of the other images. Perhaps I could chop the image in half, then put the two images together with no border between so they appear to be one image???

      Thanks Maxime for any understanding you can give me about this!

    5. Ken Robertson Hey Ken. Just got a chance to look at this now... Here is how you can improve this.

      In the code, find :

      .justified_gallery .elementor-image-gallery .gallery-item {
      width: auto;
      }

      Change to :

      .justified_gallery .elementor-image-gallery .gallery-item {
      width: auto;
      max-width: unset;
      }

    6. Maxime Desrosiers I noticed that the images do not show up when I have width set to auto. I had to selt an explicit width.

  5. hi!! thanks so much for thiss!!!!!!!! i wanted to ask. instead of scrolling by pinching and move, whats is the code to scroll just by softly touching the trackpad?and in which line should i put it? thank u!

  6. Doesn't appear to be working at all with the latest versino of Elementor. Followed the instructions to a T. Looking at the html I see the figure element with the image, but all I get on the front end is a blank area where the slider is.

    1. I figured out it's an issue with my theme (Blocksy) that is doing something to the figure element. I guess I have to track down what exactly. Switching to the Hello theme made the slider show up.

  7. Maxime, This happens only when I use the keyboard right directional arrow. I notice that when I use my keyboard to arrow arrow right the images move just fine, but the "swipee" arrows move as well and then the images no longer center on the screen. Instead they align relative to how much the swipee arrows have moved. In fact the entire page seems to move with the arrows. This only happend when I keyboard the right arrow. The keyboard left arrow doesn't respond or move the images at all. Can the those left and right swipee arrows be made to stick in position when using the keyboard left and righ arrows? Or else haw can I disable to keyboard right arrow action...
    Thanks again!

  8. Hi Maxime,

    Thank you so much for writing this, it's much appreciated. However, I'm finding it doesn't work on desktop Safari. If I open the Web Inspector and press refesh everything shows up, I can then close Web Inspector and it continues to work on refesh. However, if I close the browser and re-open it fails once more. Here is the URL https://warrenre.webpi.co

    Any help would be very much appreciated.

    1. I can't replicate the bug... the swiper on your site works just fine on my Safari desktop, even after closing and opening the window, private mode, etc... just works!

    2. Maxime Desrosiers Oh wow, interesting. Thank you so much for taking the time to test it, really appreicate it. This just makes the issue even more difficult to track down though...

      Thanks again 🙂

  9. Hi! I am currently trying to remove the square border that appears around the nav arrows when they are clicked. How do I do this?

    1. You will need some CSS ...

      .elementor-element.swipee-left:focus, .elementor-element.swipee-right:focus{
      outline:0;
      }

      However this is there for accessibility purposes, and generally recomemened to be kept, or at least, replaced with some similar styling that will make it clear which item has the focus.

  10. I have 27 slides, everything works except for the last 7 slides are not shown and it loops to slide 1. There are however 27 dots so I'm thinking when I press the arrow the slides do not move all the way so on dot 27 I'm on slide 20 and the next one skips to slide 1. Any ideas?

    1. Maxime Desrosiers it's super weird, my hosting provider's server crashed and after the crash the images were swiping all the way like the should 😀 so everything works perfect now

Leave a Reply