How to Create a Slideshow Presentation with Elementor

No extra plug-ins required! Elementor Free Compatible.

View the example by clicking here: Elementor slideshow example.

To begin with, create one section only on the page

Set the min-height for that section to 100vh.

How to Create a Slideshow Presentation with Elementor

Also set Elementor page layout as Canvas

How to Create a Slideshow Presentation with Elementor

Then, create your section as you normally would, and add a button or an icon

This is where you will click to get to the next section.

Important: give that element the class name 'section_changer'.

How to Create a Slideshow Presentation with Elementor

After you got the layout you want, duplicate the section until you have the amount of slides you want.

How to Create a Slideshow Presentation with Elementor

Then, give a decreasing z-index value to each section

From top to bottom.

How to Create a Slideshow Presentation with Elementor

Now, add an HTML element on the same page

Add it as the first element of the page, with positioning set to 

Width : Inline

Position: Absolute.

Elementor Close PopUp on Click for Menu & Same Page Links
left element
How to Create a Slideshow Presentation with Elementor

Finally, add this code to the html element

Important: every section will remain visible from the Elementor Editor. They will only behave like a slideshow from the front-end. 

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.section_changer').click(function(){
$(this).parents('.elementor-section').fadeOut();
}); }); });

</script>

<style>
body:not(.elementor-editor-active) .elementor-section {
position: absolute;
}

body:not(.elementor-editor-active){
overflow-y: hidden;
}
.section_changer{
cursor: pointer;
}
</style>

Finally, enjoy this awesome design!

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>