Elementor Vertical Carousel Made Easy!

Elementor Vertical Carousel Made Easy!

Table of Contents

Learn how to make an Elementor Vertical Slider easily. No extra plugins are needed for this, just some code copy pasting!

First, create a section with a single column for the Elementor vertical slider content

Elementor Vertical Carousel Made Easy! 1

Place various inner sections in this column. Every inner section will become a slide of this Elementor vertical carousel.

After that, give a class name to the section that houses all these inner sections

Elementor Vertical Carousel Made Easy! 2

Give it the class name of 'parentsection'.

Also give a class name to all these inner sections

Give them the class name of 'swipee'. The name 'swipee' is used that it does not interfere with other classes in the Elementor library.

Elementor Vertical Carousel Made Easy! 3

Then, add this code to add the Elementor vertical carousel functionality

Add this code in an HTML element, that is placed in a section after the Elementor vertical slider section.

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
if (window.innerWidth > 1024){
let parent = document.querySelector('.parentsection .elementor-widget-wrap');
let children = parent.querySelectorAll('.swipee');
let wrapper = document.createElement('div');
wrapper.className = 'swiper-wrapper';

children.forEach((child) => {

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



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

var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: {
pagination: {
el: '.swiper-pagination',
clickable: true,
navigation: {
nextEl: '.swipee-down',
prevEl: '.swipee-up',

.elementor-element.elementor-absolute.swipee-up, .elementor-element.elementor-absolute.swipee-down{
z-index: 99;
cursor: pointer;
line-height: 0;
.parentsection .swiper-wrapper{
height: 440px; /* Height of swiper */
.parentsection .swiper-pagination{
transform: scale(2.6);
padding-right: 4px

You may notice that swiper script in the beginning of the code, this is because the swiper library that comes pre-installed with Elementor-Pro did not work correctly for vertical swipers.

Now, you can add arrows to navigate through the vertical slides

Add two arrow icon, one pointed up and the other down. Give the up arrow the class name 'swipee-up' and the down arrow the class name 'swipee-down'.

More on the JS Code...

The direction of the swiper can be changed to horizontal by removing the direction attribute in the swiper object.

Elementor Vertical Carousel Made Easy! 4

The height of the .swiper-wrapper should be set to  equal or  slightly greater than then the tallest inner section in the CSS code here.

Elementor Vertical Carousel Made Easy! 5

The size of the navigation buttons in the slider can be changed by modifying the transform: scale(2.6)  CSS values shown below.

Elementor Vertical Carousel Made Easy! 6

Elementor Vertical Carousel Made Easy! 7

See the video tutorial for more information about this!

Finally, enjoy your Elementor Vertical Carousel!

Let me know if everything works for you!

Looking for something else? Search across 2445 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly


15 Responses

  1. amazing man ! thanks a lot!
    I tried to use this code with my 1st 3 sections to make them as a vertical slider - but i had very wierd results...

  2. This looks awesome! used it on my website but struggling to optimise it for mobile, trying to set more padding so users can scroll past but make it longer so all the content fits in the section, any idea how id do this?

    1. Hey Jack! No simple way to make this work well on mobile... In my template, I even reverted back to a normal left to right swiper, as it's more simple UX on mobile...

      If you have very little content, you could make this work, but even then the UX isn't super good, as sometimes the user will be trying to scroll down, and will instead swipe to another slide...

  3. Hola Maxime! Gracias! Tengo este error al copiar el código y no logro hacerlo funcional 🙁
    55 padding-right: 4px
    56 }

    En 57 y 58, aparece la "x" y en azul

  4. This is awesome, thanks for sharing.
    I just wonder can we change the Jet engine slider from crocoblock from horizontal slider to vertical slider?

    This will be a great function.

    Thanks and looking forward to your updates.

    1. Hey Gabriel!

      Right after the line

      direction: 'vertical',


      loop: true,
      autoplay: {
      delay: 5000,

      And then, delete

      mousewheel: {


    1. It should be working fine. I haven't tested it yet on 3.6.0 Pro version though, so it's possible there is a problem with it. But quite unlikely... as the code is stand alone, and has no Elementor dependencies...

      There is probably another problem.

Leave a Reply