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!

This download gets you the following template :

Elementor Vertical Carousel Template

Related tutorial : Elementor Vertical Carousel

Name your price $

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>
<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) => {
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);

var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: {
releaseOnEdges:true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swipee-down',
prevEl: '.swipee-up',
},
});
}
</script>

<style>
.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
}
</style>

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!

 
Comments
To see the comments, click 'accept all' in the Cookie settings (lower right sticky icon). Then refresh the page.

If you still don't see the comments, try using Chrome or Edge, as you probably you have an adblock or a browser such as Firefox or Brave.