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.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>