Elementor Creative Vertical Card Carousel/Slider (auto Sliding Effect) | Team Member Carousel Plugin

preview_player
Показать описание
Today, I'll show you how to make Elementor Creative Vertical Card Carousel/Slider (auto Sliding Effect) or a Team Member Carousel without additional plugin.

✅Get Elementor Pro:

✅Get code snippet for Elementor Card Carousel:

✅Get this READY-MADE template on TEMPLATISH:

In this tutorial, I’ll show you how you can create an auto sliding creative card effect in your WordPress website by using Elementor. Each of the cards are automatically sliding on a time interval and when we hover over on these cards it pauses and after moving out the cursor it again continues to make slider animation. Here to create this team member carousel, we also don't need any team member WordPress plugin or any Elementor carousel plugin.

If you want to get this creative testimonial carousel as a template you can get this from my Gumroad shop. But, if you don't want to get this vertical carousel/slider, you can also start it from scratch.

First, we need to take an inner section and inside that put all the contents - Image, Text and Button. Then, we need to style those elements and place in one line.

After that, we have checked that Elementor custom slider card from the tablet and mobile devices. And simply duplicate the card multiple times and change the contents. Add some CSS and JavaScript code to finally create the team member carousel.

So, that's how you can create auto sliding image carousel with text in Elementor. if you enjoy this Elementor tips and tricks video and also want to get more card design or creative templates, don't forget to like and subscribe.
Рекомендации по теме
Комментарии
Автор

EVERY time I search something I need for my Elementor website, you have already created a tutorial for it!!! This channel is simply amazing. I am grateful you have decided to create content and share this with us. It's unbelievable that this is free to watch.

betinapaixao
Автор

You are sooo talented. I am so pleased and happy that I found your channel 🤩

globetrotterot
Автор

thanks for this tutorial
but it's not working on container widgets

hamidasadi
Автор

You are a genius! Thank you for your work, I hope everything is okay with you! You are expanding horizons, pushing the boundaries of what is possible on a low-budget platform

MKMankowska
Автор

Thank you for giving me amazing tutorial.. but brothe one issue this is not working in flexbox container why?
give me solution plz...

nurislam
Автор

Amazing, I was thinking maybe you'll use a plugin, but without any plugin you do it. Thank you for such a video.

hassamulhaq
Автор

Great video, Unfortunately it doesn't work for me. I followed every step, but I use only text without image and button. When I paste code into the column, one inner section has not disappeared, but others have disappeared. I pasted the HTML code then an internal section that did not disappear stuck at middle vertical and others did not appear and only the text moved.
But I'm not sure if other inner sections really disappeared or just all were in the same place in the middle vertical.

pedropires
Автор

Thank you so much for this! But with flexbox container active it doesn't work :') but well, i needed it bad that I made it work ahahah ... Basically I just wrapped everything like this:

--- Main Container
-- Base Container with class elementor-inner-section
- Last Container with class elementor-container and with image inside

And I used the same code u gave to us, anyway, thank This effect is awesome and is exactly what I wanted

laragraysse
Автор

how about container new version of elementor? whats css code? because this code doesn't work

vahidgoudini
Автор

Is this only for people with elementor pro? Because custom CSS isn't available in the free version.

harireddy
Автор

Thank you for sharing! It’s very useful

sumonkhan
Автор

Here we go solution for container issue;
----
Only one line is changed in JS code " var slide = $('.sliding .item'), "
Container = .sliding
İnner Containers ( slides ) added new class name = .item

---CSS----
selector{
--change-duration: 0.75s;
height: 320px;
}
selector .item{
position: absolute;
left: 10px;
transform: translateY(-50%);
}
selector .item{
opacity: 0;
transform: translateY(-100%) scale(0.5);
}
.anim selector {
transition: all var(--change-duration) ease-in-out;
}
selector .after {
opacity: 0.4;
transform: translateY(100%) scale(0.8);
}
.anim selector .after {
animation: enter var(--change-duration) linear .1s ease-in-out;
}
selector .before {
opacity: 0.4;
transform: translateY(-100%) scale(0.8);
}
selector .current{
opacity: 1;
transform: none;
}
selector .before,
selector .after{
z-index: 1;
}
selector .current{
z-index: 2;
}

@keyframes enter {
0%{
opacity: 0;
transform: translateY(100%) scale(0.3);

}
25%{
opacity: 0.1;
transform: translateY(100%) scale(0.4);
}
50%{
opacity: 0.2;
transform: translateY(100%) scale(0.5);
}
75%{
opacity: 0.3;
transform: translateY(100%) scale(0.6);
}
100%{
opacity: 0.4;
transform: translateY(100%) scale(0.7);
}
}

ddgnyldz
Автор

Thanks for great tuto mate. IIf u distort the cards as they move, ie, side neareswt will be lareger than the bottom/far ( like paralellegram, .) oir flip them left right on focus )grow left side shrnk right, right grow, left shrink normal. add a horizontal gradient, that will givea a glow/shine to the eenlaerrged ssides as they come forward. It would be best to have animations run before text appears, (if its single word/title wontmatter much). but if you are gonna go route of svg animation, and u distorting text its going to a little more taxing than it should be in some instances. (death by gllyph memory tsunami)

jonomozzy
Автор

bro I followed your each instructions, and have tried several times but it's not working with Container version. will u please make a new video on Container version

checkcheck
Автор

Can i make this to scroll horizontally?

godwinitopaotaru
Автор

Bro, You are jim fahad.


I found this channel today, I follow your main channel regularly

tahmidislam
Автор

Bro your tutorial is Joss I always prayer for your YouTube channel...or css code very helpful for us...if you show how to write this css code then we practice in home.. love from Bangladesh 💓💓💓

asifislam
Автор

is this still working with the flex container ?

osdzljg
Автор

I love this. Excellent aesthetic. 2 questions: 1) is it possible to use this for a whole section or is it column specific? 2) is it item specific clickable? In other words, if I hover on it, and click on an item, will that click take me to a corresponding link?

Thanks!

loyalcarlon
Автор

it looks impressive, I've tried using the containers instead selections and that messed it all up. any help?

cipkalo