In this tutorial, you will learn how to create an awesome custom slider, with Elementor.
Elementor Pro is required for this one as we will be using CTA elements.
Here is what we will be creating:
Here is what it looks like on mobile:
You can also visit the demo page directly.
Credits: I got the design idea here.
Features:
- Amazing: get a truly original slider and impress your visitors or clients
- Fully responsive: the layout is responsive and works well on tablet and mobile too
- Easy to replicate: simply copy paste the template
- Make it your own: swap to your content, edit the CSS to customize the fonts and colors easily
Also note that the slider is entirely custom (i.e. it's not using any JS slider library), and as such has a limitation: you can't swipe to navigate through the slides. You have to click the arrows, or click on one of the cards.
Another limitation is that it's not dynamic. It can't come from a custom post type. The slides' content is static. It could come from an ACF options page (or equivalent) though.
The Container feature needs to be activated for this tutorial to work.
Here is an alternate version that shows fewer cards on desktop (tablet and mobile stay the same) that's also provided in the tutorial.
Let's get started!
First, import the template on your page
This is a premium tutorial. Purchase access to unlock the full tutorial and access the template.
12 Responses
I I try to copy and paste the template but it not work ....can you post the json file or can you send me a json by mail ... Thanks!
Sent through email.
I try to copy and paste the template but it not work. Copy something other design from my web.
Try two twice, the same response:
https://share.vidyard.com/watch/vyQuX434d96wwc3orG8vmo?
Greetings,
To copy the template, you need to Right click > Paste from another site. You need to right click at the bottom of your page where you have the little folder and + icon.
Then when you have the screen where it says "press CTRL V", you click CTRL V.
Let me know if that works!
I got it's!
Thanks a lot.
How to reduce the size of the template cards in bottom?
I want only 1 and half card in the bottom. and also can I have less than 7 slides?
Greetings!
I have made this modified version for you: https://templates.element.how/elementor-amazing-full-screen-slider-template-fewer-slides/
Let me know if that's what you are looking for, I will send you the template file by email.
In this version, you need 6 slides instead of 7.
Cheers!
Yess, this is what I wanted to achieve, thank youu. Can you please email me the same?
Is there a way to get rid of the button? I tride to make it transparent but it did not work for the box in the "normal" mode (in the hoover mode it did)
Greetings Bjorn!
Yes, simply empty the field "Button text" from all text, the button won't be rendered.
Cheers!
Hi!
I Liked to custume the tamplate in the code, but unfortunately it didn't work.
don't want the round edges and the glow on the cards.
(I edit the code, all border-radius and box-glow 0 and none, but didn't do anything)
cheers!
Greetings Kimberley,
Please open the CSS, and find the part that says:
/*
*
* Modify the CSS below only
*
*/
And then, you will find several instances of:
.fancySliderCard .elementor-cta__bg.elementor-bg {
border-radius: 2vw; /* border radius on the cards background */
box-shadow: 0.3vw 0.3vw 1.1vw 0.7vw #ffffff77; /* box shadow on the cards background */
transition: all 0.9s cubic-bezier(1, 0, 0, 1); /* transition on the cards background */
}
.fancySliderCard .elementor-cta__bg-overlay {
border-radius: 2vw; /* border radius on the cards gradient overlay */
transition: all 0.9s; /* transition on the cards gradient overlay */
background-image: linear-gradient(to bottom, transparent 60%, #000000 100%); /* gradient overlay on the cards */
}
There will be also similar for tablet, and for mobile, lower in the CSS.
Set them to 0:
.fancySliderCard .elementor-cta__bg.elementor-bg {
border-radius: 0vw; /* border radius on the cards background */
box-shadow: 0vw 0vw 0vw 0vw #ffffff77; /* box shadow on the cards background */
transition: all 0.9s cubic-bezier(1, 0, 0, 1); /* transition on the cards background */
}
.fancySliderCard .elementor-cta__bg-overlay {
border-radius: 0vw; /* border radius on the cards gradient overlay */
transition: all 0.9s; /* transition on the cards gradient overlay */
background-image: linear-gradient(to bottom, transparent 60%, #000000 100%); /* gradient overlay on the cards */
}
Let me know how it goes!
Cheers!