Elementor Vertical Carousel Made Easy!

Elementor Vertical Carousel Made Easy!

Level up your game with the CSS Course for Elementor Users

Table of Contents

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

Update: I now strongly recommend you get this tutorial instead: Elementor Carousels Premium Mods (Vertical, Fade).

I kept the instructions below for informational purposes only, but I will no longer any kind of support or updates. See the Elementor Vertical Carousel tutorial for the improved technique.

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> 
/* Please login to get the code 
 * The code will be for the Elementor Vertical Carousel Made Easy! tutorial 
 * Found at this URL https://element.how/elementor-vertical-carousel/ 
 */ 
</script>

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!

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Vertical Carousel Made Easy! tutorial 
 * Found at this URL https://element.how/elementor-vertical-carousel/ 
 */ 
</script>

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

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

Checkout the Elementor Addon Finder directly

31 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...

      1. Hey Muhammed!

        Yes this is possible. We have to load an updated version of SwiperJS to get this working (Elementor is using a years old version, which does not work well for vertical swipers).

        So this might create issues for other Swipers on the page.

  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 }
    x57
    x58

    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',

      Add

      loop: true,
      autoplay: {
      delay: 5000,
      },

      And then, delete

      mousewheel: {
      releaseOnEdges:true,
      },

      Cheers!

  5. 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.

  6. It's not working for me either, on Elementor Pro. If I remove 'direction:vertical it does work, but I would like it to scroll vertically. I wonder if the Elementor swiper script is overriding the one we are loading via your code.

    1. I updated the code, now it should work fine. I believe the issue was from an update form Elementor, where new swiper related CSS messed with this setup. Fixed.

  7. if we want to remove scrolling just click on dots to scroll then what will be changed in code.
    Thanks

    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) => {
    wrapper.appendChild(child);
    child.classList.add('swiper-slide');
    });

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

    container.prepend(wrapper);

    parent.prepend(container);

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

    if (window.innerWidth > 1024) {

    var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: 30,
    mousewheel: {
    releaseOnEdges: false,
    },
    on: {
    slideChangeTransitionEnd: function() {
    if (swiper.isBeginning || swiper.isEnd) {
    swiper.params.mousewheel.releaseOnEdges = true;
    } else {
    swiper.params.mousewheel.releaseOnEdges = false;
    }
    }
    },
    pagination: {
    el: '.swiper-pagination',
    clickable: true,
    },
    navigation: {
    nextEl: '.swipee-down',
    prevEl: '.swipee-up',
    },
    });
    } else {

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

    .elementor-element.elementor-absolute.swipee-up, .elementor-element.elementor-absolute.swipee-down, .elementor-element.elementor-absolute.swipee-right, .elementor-element.elementor-absolute.swipee-left{
    z-index: 99;
    cursor: pointer;
    line-height: 0;
    }
    .parentsection .swiper-pagination{
    transform: scale(2.6) rotate(90deg);
    padding-right: 4px;
    top: 50%;
    right: 0;
    }
    .parentsection .swiper-pagination .swiper-pagination-bullet{
    margin: 0 1px;
    }
    .parentsection .swiper-wrapper{
    height: 440px;
    /* Height of desktop swiper */
    flex-direction: column;
    }
    @media (max-width:1024px){
    .parentsection .swiper-wrapper{
    height: 540px;
    /* Height of tablet swiper */
    }
    }
    @media (max-width:767px){
    .parentsection .swiper-wrapper{
    height: 760px;
    /* Height of mobile swiper */
    }
    .parentsection .swiper-pagination{
    transform: scale(2.6);
    padding-right: 0px;
    padding-bottom: 12px;
    }
    }

  8. Salut Maxime!

    Thanks for all these tutorials! Really helpful!

    I'm looking at this tutorial and trying to figure out how to make it work with Elementor Containers instead of Sections.

    Any tips to make it compatible?

    Thanks in advance!

      1. Hi! Thanks for the amazing tutorial. I Have the same issue and Used this piece of code (the overflow hide), but it's not working; it only shows the first inner section, without the slider dots... any suggestions on how it can be fixed?

      2. Hi! Thanks for the amazing tutorial. I have the same issue as Dinesh. I used this piece of code to hide the overflow but it's not working. It only shows the first inner section, and also hides the slider pagination dots. any suggestion on how it can be fixed?

  9. Hello! Since Elementor has been updated to use "Containers" now instead of "Sections", could you please make a new tutorial on this?

  10. hey Maxime,
    i see in the sample page that as well as the up/down pointing arrows you have a side dots navigation, which seems missing in the tutorial.
    any hint on how to add that to the code? or in particular the JS for adding the "active" css class to the clicked nav item when the corresponding slide is showing?
    thanks!

    1. Greetings Mark!

      Sorry, as I wrote at the start of this tutorial:

      I kept the instructions below for informational purposes only, but I will no longer any kind of support or updates. See the Elementor Vertical Carousel tutorial for the improved technique.

      Hope you understand. Cheers!

Leave a Reply