Slide Anything in Elementor/WordPress? Advanced Custom Carousel/Slider with Templates (NO PLUGIN)

preview_player
Показать описание
Today, I'll show you how to slide Anything in Elementor/WordPress and make an Advanced Custom Carousel/Slider with Templates using NO PLUGIN.

✅Get Elementor Pro:

✅Get Domain & Webhosting(SAVE 50%):

✅Get additional code snippets:

✅Get creative templates on my Template Shop:

In this tutorial, I’ll show you how you can slide anything in your WordPress website using the Elementor Page Builder. So, inside each of the slide you can do different design, different structure, text and image. Basically, you can put anything inside each slide which you can fully edit by the Elementor Editor.

Then, I’ll also show you how you can design a full width slider with anything where you can also add different kind of entrance animations when you change your slide.

Here, we can't use the default Elementor slider widget. We need to take a testimonial widget and clear all the text from its option. Because inside each of the slides, we'll use templates (custom content) instead of the normal content.

Then, from the dashboard we create those templates. Copy the shortcode of the template and paste that inside the first slide. Then, we create another temple and paste its shortcode on the 2nd one and so on.

We have also adjust some design of the custom carousel for removing it's default and also use some custom CSS code for some improvement.

At the 2nd part, we also create another full width custom slider. Here, we also do the same thing. But add some entrance animation on slide change. We use some JavaScript code to make the animation work.

If you enjoy this WordPress tutorial, don't forget to like and subscribe.
Рекомендации по теме
Комментарии
Автор

Holy crap, I didnt thought of using the templates shortcodes in the slider! Why are you so wise in the ways of elementor? Thanks for this video! 10/10 delivered on what it promised.

SilverAlex
Автор

Seriously you are amazing !!! Love your tutorials - they are so easy to follow !!! Thank you for sharing it!

Stolica
Автор

This is awesome! Thank you so much! I'm mostly a Gutenberg developer but clients love Elementor, so I'm learning the page builder. This is just what I needed for a section on one of the web sites I was working on. Thank you again!

robertbaker
Автор

what a life saver this video is!! I thought i would have to go deep into CSS to customise my carousel but this is a game changer!!

paulinazawadzka
Автор

Many thanks for this tutorial. I always learn something new watching your videos

thomascouch
Автор

Thank you, you are a genius! Been looking for this solution for ages. It works perfectly :-)

mobrumski
Автор

Ireally love your videos and tuts, you're the best man

SkuIIZProductioN
Автор

Hola com estas, muy buen tutorial, me funciona muy bien excepto por una cosa, cuando lo uso en un slide principal debajo de menu (header), el slide se superpone y no me permite navegar en el submenu, sabes como podria solucionarse?.. gracias..

tuweb
Автор

Thank you so much for this amazing tutorial video!! I'm having trouble with images disappearing on auto-slide (but if I hit the "back" arrow, the image is there). It's happening on two different websites. Any ideas?

magnoliarabbit
Автор

Great video - thank you. I subscribed to your channel. One question: If I want to make a full width slider with 3 different images (for 3 different slides), how big must my images be, in other words the height and the width?
NOTE: I do not want the slider to take up the entire 'above the fold' space. Thanks.

izakniemann
Автор

You're amazing dude! Really impressing everything you are doing for the community! Would be great if you could do a video where you could explain the selectors and how you work with Javascript in order to integrate the code into the builder .👌🙌

alistoicakovacs
Автор

Hi, thank for this awesome video. That realy inspired me and opened my mind to what is possible.
I have 1 questiong though.
When creating a carousel with multiple elements (9), the first element seems to not quite lign up the same way as the following 8. Would you have any idea as to why that is?

perhenrik
Автор

Thanks Man stucked so badly, loved your trick

ArunSharma-brxf
Автор

Just subbed, this is a great way to create a really nice custom slider

spydergs
Автор

Thank you very much for sharing this tip. Helped me a lot! 🙏🏻

guilhermetofanin
Автор

hello, I'm facing a problem please reply, i have set to show 3 items in view but it is showing more items and showing in full screen not like you in box where only 4 items are shown, I have checked the content width of container and it not to fullwidth is boxed, edit: then i use overflow:""hidden" to testimonial slider then it is solved, not showing extra items anymore, but i tried to move arrows out I cant do this as overflow is hidden, so give a solution other than overflow hidden and i have set slide template width to 300px for each reply

apardeepsingh
Автор

Hello and many thanks for this great video! I would like to make this but in mobile like one of the next card are visible, do you think it is possible to make that with elementor and this opction? Thanks!

inoirberry
Автор

Your tutorial was a life saver, thank you so much!

pepelopez
Автор

Amazing tuts, you deserve more likes, more subscribers! Keep up the good work!

trungduchua
Автор

what if i want the center slide to go bigger, in a 3 slides slider?

kitssonjose