Elementor Vertical & Smooth Image Carousel

Elementor Vertical & Smooth Image Carousel

Table of Contents

Zoë Tame asked me to help out with this. She shared with me that website, from where she wanted a similar image carousel. I was able to replicate this by reusing their coding technique! Thank you Zoë for sharing this with me!

See the demo here.

First, create the right image for your Elementor Vertical Smooth Carousel

You will need an image, with essentially all your images already in it. I created mine using Crello, a Canva alternative, however any Image Editor software should work fine.

Your image needs to end up looking like this. Ideally with that kind of 'overflow' of one or several images, for a seamless animation loop.

Elementor Vertical & Smooth Image Carousel 1

Of course, this has the inconvenience of not being dynamic, and of being troublesome when you want to change just a few of the images.

However, it has several advantages as well. It makes a very lightweight, CSS only carousel, that has no JS dependencies. The animation is super smooth, and the CPU usage is negligible.

In short, it's very efficient, if a bit unpractical.

Then, give your column the class name 'verticalcolumn'

Set that column 'Widgets Space (px)' to 0 (under Column > Layout options).

In that column, add an image element, and select the image you created. Give that image element the class name 'carouselvertical'.

Set it all up exactly as you want it, and then, duplicate it. You need two of them in that column, with the exact same settings.

Finally, add this CSS to the place of your choice.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn > div {
    max-height: 520px;
        height: 520px;
    width: 520px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

@keyframes vloop{
0% {
    transform: translateY(0px);
}
100% {
    transform: translateY(-100%);
}
}

And that's it! Everything should be working fine.

Let me see your creations with this design!

Fancy an awesome full screen navigation?

Elementor premium full screen navigation templates
Comments

8 Responses

    1. Here is the code required for that. You also need to give the column the class 'horizontalcolumn' instead, and the images the class 'carouselhorizontal' :

      .carouselhorizontal {
          animation: 10s linear 0s infinite normal none running hloop;
          min-width: 100%;
      }
      
      .horizontalcolumn > div {
          max-height: 90px; /* adjust this to the approximate height of your images */
          overflow: hidden;
          -webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent 100%);
          flex-wrap: nowrap;
      }
      .horizontalcolumn > div:hover .carouselhorizontal{
          animation-play-state: paused; /* delete this if you don't want it to pause on hover */
      }
      
      @keyframes hloop{
      0% {
          transform: translateX(0px);
      }
      100% {
          transform: translateX(-100%);
      }
      }
      
    1. Hey Delphine!

      Yes it is, although the code required is a bit different... I will update this tutorial or publish another tutorial for that!

  1. Hi Maxime,

    thanks for your neat tutorial. I tried it out and while the vertical works fine I can't figure out what's wrong with the horizontal one. The second image just pops in when the first has left the column. Any idea?

    1. Hey Maximilian!
      You need to keep in mind that the horizontal design here works in exactly the same way as the vertical design. The two images need to be the same image, otherwise we will see them swap with each other.

      1. Thanks for your reply. Nope. No matter what I do it doesn't work. I set up the first image, duplicate it, but it keeps showing up too late.

Leave a Reply

Social Media

Recent Articles