ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Glider add-on helps you create and design custom content sliders in Elementor. It does the job in the simplest possible way - by turning the Section columns into slideable content. Each column or a slide can be built out of available widgets, in a way everyone is used to when it comes to Elementor.
Glider relies on Swiper slider that is built into Elementor, so everything here is done in Elementor friendly way. Building a decent content slider in Elementor has never been easier.
-------------------------------------------------- EXTRAS!
If you plan to buy Elementor PRO - buy from this link and help me keep this channel alive!
be.elementor.c...
OoohBoi Steroids for Elementor plugin page:
wordpress.org/...
Visit my Gumroad shop for more cool stuff:
gumroad.com/oo...
You might consider buying me a coffee if you find my work helpful for your business:
www.paypal.me/...
Download this tutorial Training File(s):
cutt.ly/8t911U6
![[ TEASER ] เงาะป่า - วงL.กฮ. | TMG RECORD](http://i.ytimg.com/vi/M4ObdFfcPww/mqdefault.jpg)
After building something that looks impossible with this, I decided to buy one of your product, its worth all your effort...thanks for sharing
Awesome, thank you!
Thanks mister, now I understand the attributes section, so cool ! I will have to implement a nice slider in my next project :)
Ooohboi is literally an Alien! You can know for sure because of the background noise in his videos.
i was always curious about that sci-fi beep.. :- )
The names are so funny, made me laugh multiple times. The functionality is amazing! Thanks Boi!
Glad to read you like it mate, regardless of the context!
This one is amazing! Now I'm able to create a slider out of every single widget out there. Thanks!
how did you make it work? I got the plugin and now it doesn't seem to have this feature (ability to use any elementor widget within the slider) anymore
Hi. Do you have an option to set multiple cols to show in your slider? For example: 3 cols in each slider item (not 1 column). Regards
No, that's the carousel and the settings for carousel are different than those for slider. It's impossible to manage both Slider and Carousel from the same set of controls/options/settings.
MAN this is awsome, it works like charm and let us get rid of various plugins to serve the purpose.
Love the steroids plugin man. I do have a suggestion, can you make the glider plugin so that it can be applied to even the inner section's? That was we don't have to use the comlete screen for the slider and have like 50% width slider and other 50% something else. Please make this happen
I found the solution for your problem. Contact me to bojovic.jovan7@gmail.com and I will show you how via Google Meet. No charge.
@@JovanBojovic you should publish a video about it, because that was why i was heading here. To ask the same question!
@@createrzstudio244 Thanks for the idea! Currently you can get in touch with me via email and I will help you!
Surely you could make the column after the one you want to be 50%, 100% using steroids and possibly the one before
Being able to use less than 100% inner sections as slides would be a dream. So you would be able to use the space of a website very efficiently. There are some carousel plugins (like Premium Addons Flip Carousel for example or Carousel anything by the Plus Addons), but they do not come near to an elegant solution yet. You can load them with templates (for example modal popup), but they do not function as intended (for example the modal does not open in a new window as it would when outside of the parenting slider). So this would be a HUGE FEATURE= Slide any custom widget (inner section) easily.
Just started watching your tutorials and I feel like I'm learning Elementor anew. The steroids addon is a must-have
Wish I found your channel sooner. Keep it up!
Welcome aboard and tanks for watching!
You're the tops. Thanks for the tutorial and the extension.
Thanks for this, I hope your financial situation worked out. This is some great work
Sup Boi, thanks for another amazing Elementor tutorial with an amazing add on, the slides fits perfectly to my clients sites.
You welcome buddy!
Hi, thank you for a great plug. I have a question about glider slider. My slider is made from 6 columns, it works fine, but when I upload it, it shows all slides/columns for a second and then creates the slider, what can I do to avoid this?
I have already been asked about, however, it obviously happens occasionally, not everyone is having that kind of problem. It never happened on my end. Do you use "Hello Elementor" theme or else? Try with Elementor's native WP theme and see if it helps.
The genius developed the plugin, it's fantastic.
I found that it does not display properly in the Elementor Developer container and I am not using the entry animation. Am I the only one having this problem? Thank you.
Hello! Any chance Glider works with the new container structures too? I tried it and though it seems to work in the editor it doesn't render wll in live pages. Thanks btw :)
Hello. How do we deal with mobile responsiveness please? Thank you for this amazing video tutorial
I have a suggestion for the glider function: control the number of slides present on the screen at the same time (like on the posts carousel)
If that's possible I would have already done it.
Congratulations on the tutorial!! I love your plugin, however, I'm facing a difficulty in the GLIDER function with the new "Containers" system in Elementor. When you activate GLIDER it transforms each container into a different slide, making it impossible to create sections with 2 containers per slider. Would you know how to solve this problem?
Can you update this to explain how it works with the flexbox containers, too, pls? Bit confused.
I love your plugin. I definetly will contribute with you
This saved my project, thank you so much!
Take my money now!! that's exactly what i was looking for!
Glad to read you found it useful!
After completing the loop, the right slide disappears, any solution to this? thanks a lot bro.
Thanks Ooh Boi, your addons are unvaluable !
Glad you think so, thanks buddy!
What would be nice is we can select how many columns to display at a time on desktop, tablet and mobile. E.g. if I do testimonials I would like to display 4 at a time on desktop but only one at a time on my phone. Or have an option to only turn on the slider when it is a mobile phone. This works great.
You're probably talking about the carousel. The slider is usually having only one column to showcase the content and Glider is a Slider. It's true, I was thinking about the upgrade but because of the lack of financial support development is currently on hold.
Is it possible to have it behave like a carousel of three columns? Hope you can answer. Thanks!
My favorite slider for Elementor!!
Is it any tricks for increasing number of slides? I have a personal project that using full slider for landing page, thank you.
You are amazing!
Simply brilliant. Love your plugin and your presentation.
Great tutorial and plugin Bro! Just what I was lookin´ for . Im going to make this tutorial in Spanish
Awesome, thanks!
I absolutely love your tutorials, and the coffee is granted. Can you please advise me hot add a text for overlapping images? THANK YOU!
Thanks buddy! So the text for the overlapping image would be what exactly? I mean the text is either in the left or the right-hand side column while the image (background overlay image) should be in the opposite-to-text column. Here's one of older tutorials: th-cam.com/video/jBAUgq0Zh_w/w-d-xo.html
Hi, i have a problem in my site with the plugin.
When i create a slider with GLIDER and i configure to show 3 slides per view, it's not possible, it show me only 2 slides and does not match the configuration.
Sorry about my english if has mistakes.
Absolutely love this feature of OoohBoi Steriods for Elementor! Any chance of adding a Ken Burns effect to the slide images within Glider instead of having to add it with Custom CSS?
great again. I already figured it out when it came out two weeks ago, but still I learned something new :)
Photogiraffe :-)
Is there a way to swap the arrows of the slider to something else (icons, graphic, other svg) ?
Hey Frank, glad to read it was helpful! As for the custom arrows - good point. My initial intention was to either allow FontAwesome icons or a custom image upload but I gave it up, at least temporarily due to certain tech problems. Will try to handle it...
It will be nice if you make a tutorial on the first slider. I mean the horizontal one.
OK...it could happen.
@@OoohBoi Thanks
You are the best
Hi. Need help. How to change the navigation arrows in the slider?
Great job! Your tutorials really help me a lot.
I cannot download the training files. Is the link broken, or are they no longer available for download?
Thanks
After installing your plugin, the ability to scroll on my elementor pages was disabled. As soon as I disabled the plugin this ability was restored. Any solutions?
I really love your videos and your plugin. Keep up the good work.
I have a question: how can i add a ken-burns effect to the pictures in the back?
Can you do a series on how to create widgets?
Was thinking about that as well but not sure how many people are PHP/JS skilled. Elementor's API is not that hard if you are PHP and JS friendly, the only problem is that the API is extremely poorly documented. On the scale of 10, it's like less than 1.
Oooh Boi wow ok, would still love to see myself
Hi is it possible to add more than 10 slides in a carousel, there seems to be a limit and i can't add any more than 10
Dear Ohhh Boi! Any change you update the training files again? Would love to know how to do the "this is my first slide ever" one :D Thank you very much - and let me know if I should contribute financially to it!
What if I need the slider in a column so it is only 50% wide for example, leaving the other 50% for other elements like text or CTA button?
My slides do no change only the animation plays and only the first image is shown.
Hi, Your plugins are great, Glider especially. Where can I report one bug and see how can be fixed?
Thank you! You saved me!
Is it possible somehow to make slide from intersection, it that way I would have unlimited sliders (more than 10)?
when I turn the glider on, the images disappear. If I reload my site the first image flashes once, then it disappears again. Anywhere I could read about this issue? Both elementor and OoohhBoi are fully updated. Thanks
Hi there is there a solution for the only 10 slides already..?
hey there, I need to know any quick way to add cross-fade option to the glider as my slider don't have any background image so all the slides are mixing up when i want to use the fade option in transition.
How to do this with flex containers? Doesn't work
Why don't I see you chatting on the Elementor group? Did you share your plugin there? Awesome awesome work 👌🏽
How can I join in elementor group ?
It's the end of October 2020, and I heard that the latest upgrade to Elementor affected the ability to keep the coding in place. I'm new to this and want to give it a go- but only if it works with the latest Elementor, I have E Pro.
Is it working? Thanks... your channel is the best!
You'll never know if you don't give it a shot. But rest assured that it does work!
@@OoohBoi This is the most complicated tutorials that you have posted, and your lessons are the best. I wanted to know before I built a design that the Elementor Pro 3.0 update affected.
I have lots of work to do, so thanks you for the quick response.
Your channel is incredible, cheers!
Exactly what i need, thank you so much
Glad it helped!
Nice job! the best plugin ever. When i try to add an accordion in the slider, the section wont stretch to fit the content so the content overlap on and under the next section. Is anyone exerienced this? Can someone help me figure how to make the section stretch to fit the accordion content. Thanks in advence!
Absolutely amazing plugin, a genius addition to Elementor. An addition to provide easy fixed and transparent nav headers (or anything) would be useful. One thing I would really appreciate is if you could lose the spaceship background noise in your video tutorials as it's really REALLY annoying in headphones! Very unprofessional when everything else is so excellent.
Thanks for the feedback Mark! Just to let you know that I'm in the process of getting brand new engines for my spaceship from China. These should be pollution-free and way more silent 🤖
@@OoohBoi heh, thank goodness. Looking forward to hearing all that pollution-free background silence. FWIW I've removed the Elementor Pro plugin from two sites and changed the theme from Hello to KadenceWP just to get their delightful Customizer based nav header editor. Even the KadenceWP Archive and Single page options are good enough for most sites.
My other two minor gripes is the the plugin name is too verbose and the upper case section names are rather jarring. The RHS purple icon is distinctive enough. Again FWIW.
That a great looking plugin
Hello, the training file in the description is not available. Where can I find it?
Really great! I was wondering, is it possible to use Glider to build a vertical image slider with thumbnails (in a left or right column section) that address to change to the "big" version of the chosen thumbnail on the other side column?
Glider can't do it. What you attempt to achieve includes the Inner Section but Glider doesn't work with Inner Section widget (even though it's a set of columns inside the Section). Why? Because it's a widget and widgets are used to build slider slides.
Hi, Thanks for this amazing add-ons. I may be missing something or this is a silly question. How can I add text and headings over the image in the slider ?
I just got the Glider widget and it doesn't seem to allow to make two-column slides anymore. Waste of money :/ Does anyone know another plugin with this functionality?
Awesome! Many thanks! * Is there a way (code) to stop the music player (each column has his own player) when sliding to the next?
Uh, oh, I don't think that's possible ... at least not via the interface...
Thank you for such great tuts. How to created a glider with 2 columns side by side with 3 different levels?
I absolutely love your tools and I'm using a bunch of them in my project! Really cool outcome so far 😎 Now I would like to add an additional navigation to the Glider as my website visitors will be likely in the higher age range and might not get the classic navigation (at least the test persons didn't..). What I want to do is sort of a menu above the Glider which allows me to navigate to the slide I want to watch. I tried with Menu Anchor but it doesn't work that way. Do you have any ideas how it could work? Would it work at all? Thanks!!
Hello, is this possible? I would love to reproduce, tell us how you solved it?
@@marks3819 Hi, I'm sure it's possible but I didn't figure out how. So, no solution yet, need to ask a pro...
You are really Boss. I appreciate your work. Love it Bro. Keep it up
Your stuff is so good dude. steroids is legitimately a game changer. one question though: how would you add linear transition timing to glider?
Thanks! Glider = Swiper (see swiperjs.com/swiper-api). At this point I'm not sure about the transition, however, a few things can be controlled by using the "data-swiper-" attributes. Of course, all of the attributes can be deployed via Elementor's Attributes panel.
@@OoohBoi This link is not working anymore. Was it moved?
Hello sir, Thanks for teaching me Elementor, i used the tutorial Training File ( Content Glider Image in Left, Text Box in right) but i am not able to use Fancy Text animation in this
But it's all explained in the tutorial! Not sure how come it doesn't work for you buddy... sorry!
Awesome! *Little problem: If I put an audio player in the "slides" the player will load the song but after a few slides it doesn't anymore...any suggestions? Thanks
It should work if you disable the endless loop!
@@OoohBoi works! And that is why you own a spaceship and I live in a ordinary house. Thanks again!
Wow amazing job Boi! Really nice your explanations! Thanks a lot pal! There is possible to make Nested Swipers in your Glider?
Thanks for watching! As for a nested Swiper... I know it's possible when it comes to Swiper options, however, it's not possible due to how Elementor's Sections and Columns are supposed to work.
@@OoohBoi Sad news! it would be ultra awesome if it could. Thanks for your time!
Damn you are so helpful.
I kinda got a question, not sure if you can help in that case.
I've created a glider and included Lottie animations, however, if I check the glider on my mobile phone for a test, the little animations aren't loaded (they are on desktop)
This happens if I use the apps for elementor Lottie files. If I use bodymovin and shortcode i cant demo the layout but it is workable on a mobile phone.
Do you know anything about Lottie animations and did you try them with glider?
Didn't give it a shot yet but as far as my knowledge goes Lottie requires JS library. If you know how to use browser's Developer Tools, check for eventual errors in the Console. Maybe there's an error so the Lottie library doesn't even get initialized. I've tried to insert Toggle, Tabs, Accordion, and some other Elementor widgets into Glider, and all worked fine.
Hi, it´s possible to change the button arrow desing? for example, there are five buttons on the top and an button go to the specific image. It´s pocible? Or just Arrows or balls?
You could try with the custom CSS. But first be sure to add a custom class name to your Glider instance (more precisely to the Section). Once you do that, the custom CSS for the Prev and Next buttons would be:
your_custom_class_name.ob-is-glider .swiper-button-prev {
/* style it up */
}
your_custom_class_name.ob-is-glider .swiper-button-next {
/* style it up */
}
Hey, man. Glider is a very cool thing!
Can you tell me how to place the arrows outside the columns in it?
checkout the navigation style option. at about 2m 20sec in, he shows some of these options
Hey! First, thanks for the amazing work on your plugin! One question though - is it possible to make the slider scrollable by mouse wheel? Eg. you scroll the mouse wheel down, and the slider switches over to the next slide?
Thanks! ...but I'm afraid that the mouse wheel scrolling is not possible with the current setup, even though possible thru the API. Maybe I add it as an option one day.
What is the best way to set a slider that is using fade effect to infinite loop? I tried setting attribute loop|true but that didn't work, are there additional attributes I need to use or is this something I can only do by adding JQuery?
#GLIDER + Parallax🎉💻💥🙌🏻❤️⚡️👏🏻
u have de parallax code?
Hey there, I really like your video.
Please I have something I want to do.
Can I add any entrance animation of each slide, so when I click on next, the entrance animation appears again and again.
Because when I try to do it, the animation appears one time.
How can I figure it out, please?
Do you have anything similar to photogiraffe for videos?
Hi, is there any way to change the pagination style with custom image/icon?
I'm afraid not because Elementor "embeds" these default arrows (chevrons) as a SVG with data URIs
First, thank you for your great work. However, I've encountered a problem with Glider, it's not working on Firefox. The sections show up underneath each other. Chrome displays it just fine though.
The link to your page would help! But no matter what, I'm 100% sure everything works fine in FF, I used Glider 2 days ago (no updates in the meanwhile).
Hi, thanks for your great tutorials. I want to know if you have any slider tutorial (img or cards) but for example the last image is not fully visible (a cropped image effect located on the far right) horizontally. I see this type of structure in modern pages, in case you do not have a tutorial of this type I would appreciate it if you had it. Thanks
how bout to try make their right margin with negative number? it will make them offset. i used to do this, but dunno is it best practice or nope 😂
tengo un problema con el slider cuando uso plugin de optimización se me desaparece el slider en móviles alguna solución?
You are amazing 😉 I love your tutorials
and if need overflow:visible to arrows outside of frame?, because i cant write -10% in the X axis
I don't understand the question... overflow:hidden MUST be used with Glider (or the Swiper) or otherwise all other slides would be visible at the time. It is not something that I have set at will, it's just how Swiper is setup by the default.
Hi Glider is a Great Widget...but Im not able to add more than 10 images...do know how can i add more images?
Hah! You gotta address this one to the Elementor developers department. The max number of columns per Section is 10. That's what they decided, and I guess it's around the fact that no content can be less than the 10% wide.
i love it. But I realise that it is not applicable to Inner Section. Can this be possible?
Inner Section is the widget! You use it to build the layout of the slides... so the answer is no. Sorry!
@@OoohBoi Noted with thanks, my friend! I learned so much from you. Great work!
Would you be able to make a video on resolving this following elementor bug please (of course if you CAN resolve it). The problem has been hounding the elementor community for a long time and the old solutions doesn't work anymore since the new version of elementor has been released :
When setting a section to sticky (top), it is always active. The page loads and while it is loading I see css styles for when it is NOT sticky but as DOM finishes loading and javascript fires, the .elementor-sticky--active class is applied. Even if you scroll down and back up, it does not release. This gives us no mechanism to have custom styles for sticky vs non-sticky because it is always sticky.
p.s. Before the 2.1 updates we used to be able to add a new section above it, set it to no gap and then give the actual sticky section below it -1px top margin and that was the fix. That no longer works.
Steps to reproduce
Create a new Header template
Add a new section (i.e. a pre-built header template)
Make section sticky "top" (tried varying offsets, no difference)
Add some custom css that is only applied when sticky (.elementor-sticky--active class on section)
Save and apply to a test page (with enough content to make it scroll)
Load page and notice .elementor-sticky--active class is active regardless of scroll position
Thanks for all your previous videos! Best regards to you!
the elementor side of the visual editor keeps loading after installing the plugin , it works without it
Wow, I can't even picture that, could you help with the screencast or something?
Thanks for the awesome plugin. I want to ask, let's say I have multiple columns in the slides and I'm displaying just 3 at a time. How can I target the center item(column) and edit only that.
Any suggestions will be well appreciated. Thanks
ik its been a long time, but maybe other ppl have this same issue, i suggess to find out or googling : "highlight center testimonial in elementor", there is an article bout it which it can be the refference.
Oohboi Love the videos!
Quick question, I seem to have encountered a bug. I am trying to show the slider only on the mobile view but the plugin doesn't seem to work when I add more than one section with the Glider on. I tried deactivating other plugins to see if there was a conflict with other Elementor add-ons but the issue still happened.
Would really appreciate the help! Thanks!
I don't think that Swiper (Glider's mom) can init when hidden. I'm not an expert but as I recall, the height of the hidden element is unknown.
Nice, but what about the mobile version of it? I think that there will be issues to take into consideration, there?
Did you actually give it a shot? If not, the point is that you build the slider by yourself which in turn means that you're responsible for making the slider elements (widgets) responsive too.
@@OoohBoi i will give it a try. The only think I'm considering is the responsiveness in mobile version. I wanna save some time as well as learn things, that's why I watched your videos here :)
Hi man! Fantastic work :D
I have a question about the slider and the mouswheel: how can I set that when I reach the last slide scrolling with the mouswheel it exits from the slider and continues scrolling the page?
Thaaaaanks :)
Uh, I don't think that I fully know the answer to that question, but somehow, my common sense tells me that some kind of a scroll event needs to be involved to something like that... a piece of JS, I guess.
@@OoohBoi Extacly! The swiper documentation calls for:
mousewheel: {
releaseOnEdges: true;
}
but I can't figure out where to put this :/
@@TheBestAdry OK... that's something. However... unless that option is built into the Glider, you won't be able to apply. It's because how Elementor "creates" the Swiper instance on the page (Glider = Swiper)... you can't access its properties and methods hence the Swiper instance is saved inside the local variable. I hope it makes sense.
@@OoohBoi yes it does :) so no work around for a newbie like me 😂 thanks man! Keep it up!!
As always Great Job , Thanks
this is amazing👍, but how to make it active only on mobile?
It works on mobile too. Am I missing something?
Hello, thank you so much for the plug-in but I am facing a difficulty with the slider when I choose fade transition, slides are one on top of another, is it possible to make them like a loop or at least not stacked in this why? Because the idea is to use top buttons to take to slides as if they were the menu, the fading made them look like the fake menu is always there. I hope I made sense with my explications :) Thank you.
If they are supposed to fade then they have to be one atop of another. And if they should slide then are placed one after another. Either case, this is just how Swiper (Glider) works like.
Hey mate, Awesome tutorial, could you make a full VH, 50/50 split (two columns) slider with this? Text on one column and photo on the other
Thanks! Sure you can, simply insert the Inner Widget to the target column, add the image to the left-hand side column and the text to the other one. Am I missing something?
First of all, you are amazing! Is there any way to create Gslider dynamically using Custom Post Type?
Thanks! There's no way to create the slides dynamically because you'd have to create the Columns dynamically which is not possible in Elementor. Why? I guess it's because the number of columns per section is limited to 10.
Hello, thank you for the great work you put into your project. i find the plugin very helpful. I have a problem loading text and button over an image in the slider. The text and button just disappear when the slider is running. When I click in the slider, the text sometimes appears. What can I do about this? It looks like lazy loading is interfering but I'm not sure.
ok it's becaus of entrance animations. Without it seems to work.
Pause on hover guys with the glider? I've been searching for a while and this is the missing part to my site! Client is demanding it too so i need to find a way...
Yes, it makes sense!
Awesome function. :) Mr, are you plan to integrate, the centered mod in a future? :)
Could you point me to what exactly "centered mod" is?
@@OoohBoi Sorry for the delay. I Will send you a pm in your email. I can better explain as here. Hope not problem.
Thank you
You're welcome