*IMPORTANT NOTE!* By default, the jQuery library in WordPress is enqueued on page FOOTER. Due to the fact that certain WP plugins dequeue jQuery library from the default location and enqueue it back on page HEADER, this slider worked for some people and failed to work for others. My fault coz I wasn't aware of that before. *PLEASE take my apologies!* Things have been fixed now and you can (re)download the corrected version of the jQuery code (both training files and Gist). Hence the fact I can't do any corrections in the video, an initial version of code will be shown.
@@OoohBoi Hi, I just bought your slider templates, already import the template but only working on vertical mode slider, its only me or somebody have a same problem?
Lots of people commenting this method is having issues. I started to implement it and then found Oooh Boi's plugin "Steroids for Elementor". The plugin can make most of these changes and has a whole lot more. As someone who prefers to make/style his own modules where possible rather than use heavily bloated Elementor Addon plugins this plugin is one of the best Ive found. Thanks!
Hi mate, I created a horizontal slider with an inner section. On desktop, it works great. But on tablet and mobile, the columns of the inner section stay next to each other instead of on top of each other. I tried to set the inner section column wide on 100% but no success. How to solve?
You can set the Inner Section column width per device in Elementor (just click that little screen icon next to the option name). Another option would be to use my Elementor add-on named "Steroids for Elementor". There's an extension "Breaking Bad" inside which allows you to manage Sections and Columns easy way.
Did you solve the problem?? Just wanted to know because i face the same problem, but changing the inner section column width for each device doesnt work
You are brilliant, sir. The first time I went through the tutorial though I got this error: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' But then I bought your tutorial code and it solved whatever the problem was. That was the best $1.45 I have ever spent in my life.
Hello! Oooh Boi, I just bought your fabulous slider templates, but it's not work on my end. I followed the Elementor lesson unfortunately still the same, please can you help me out
When you only say "it's not working", I can't do much but suggest to try again or maybe switch the Browser. Is there any JS error (use developer tools to check it out in the Console)? What other plugins you have installed? Is your PHP up to date? It should be 7.0 and above... Essentially, I have created the plugin for Elementor that includes custom slider builder. My plugin is named "Steroids for Elementor", it's 100% free (ask Google) and the slider is named Glider. Check out the following video to find out more: th-cam.com/video/9t4vugF2Lok/w-d-xo.html
When you load the page at first the slides don't load correctly (they are stacked beside each other making it look like a four-column section), then after a few seconds, it loads up the way it supposed to. How do you fix this issue?
There's a technical drawback to this method (the loading lag), however, if you use Glider which is the part of Steroids for Elementor add-on, you gonna have identical slider that loads as any other Elementor widget. Steroids for Elementor is free and can be downloaded from WP's plugins repository.
"Steroids for Elementor" include the extension named Glider which is basically the same custom slider from this tutorial controllable via the user-friendly interface. Just Google for "Steroids for Elementor". Glider can be controlled via external links or the links inside its own slides. Tutorial on that topic is yet to come.
Hello I just bought your fabulous slider templates but I am facing a small problem. I am using the vertical scroll template inside a section which is minimum height VH-100. Because I want to convert it to section scroll later. Now as soon as Ib ring the slider template inside the section, the section height increases automatically. Now how i get the slider to stay in the minimum width please help.
The CSS code is not working already on the new version of Elementor ? .custom-swiper .elementor-container .elementor-row { flex-wrap: wrap; } .custom-swiper > .elementor-container > .elementor-row > .elementor-element .elementor-column { width: 100%; } Or am I something missing ?
The most likely it won't work on E3.0 because they decided to make the DOM leaner and remove "unnecessary wrappers". However, it still works just fine.
Thank you. You're the best Elementor TH-cam channel. Everything else is quite generic out there. I saw the elementor pro block vol. 1, should we wait til tutorial for that or is it out of the box? Good stuff man.
Tanks for the support! If you are asking about Atlanta Elementor Blocks, there won't be any tutorials with regards to this one, it's just a collection of importable blocks for those who build websites with Elementor. Or just for anyone else interested to see how complex layouts are built.
Really good, but one little Problem: After a refresh oder loading the site with a link, for a part of a second all three rows a visible. Is there any workaround to avoid this?
Please try to use the "Glider" extension from my plugin "Steroids for Elementor" (it's free, just ask Google). Glider is the interface-controlled version of the slider seen in this video.
Hello there!, i have a doubt: if i want to add a button inside a column of the section slider that take me to the next section, what should i do to archive this?.
Did you mean "how to cross-link" slider slides? If true, please disregard this custom slider tutorial. Download my plugin named "Steroids for Elementor" (it's free, just ask Google for more info), and then use the extension named "Glider". You can set all up via Elementor editor interface and no need for Elementor PRO. Once you do that, you can import the Elementor template that explains how to control Glider from anywhere: cutt.ly/ybzphX7
Thank's man! I was wondering how to insert my favorite Slider into Elementor for quite some time. And suddenly - boom - I found your channel at TH-cam home page :) Keep doing great job!
I'm listening through a headphone while I'm watching this and it sounds like you are sitting in a spacestation. I hear lot of machine noise, blips, radiochatter Are you in the ISS?
No, you can't do that. All of the columns added to the slider should be dynamic in that case, which means all the columns should rely on dynamic resource, such as the post or the custom post type.
It works fine but in case you're looking for more elegant solution download my Elementor add-on named "Steroids for Elementor" and use Glider extension to build your sliders.
To follow tutorial! But it'll be much easier if you download "Steroids for Elementor" and use the Glider extension which is nothing but the custom slider made out of the section and columns. "Steroids for Elementor" is free add-on for Elementor, just ask Google.
Theoretically, you could modify Archive Posts widget towards that goal, however, as you probably know, Elementor won't let you edit the post item in the loop as if dealing with the single post.
@@OoohBoi I have to try it out, but I guess it should work with the free plugin Elementor Custom Skin which you can use to customize the loop item. Never tried it with JS included, but now I am curious enough to try that with your awesome slider as soon as I have time.
No, that ain't gonna work. 2 major reasons for that; Elementor does not allow more than 10 columns per section, and you can't create Columns dynamically.
Outstanding work! I have just bought the custom slider template, but as long as I am trying to incorporate it into my editor, it keeps showing an invalid error in return. Wonder what the issue may be.
I just bought the templates, however, I can't get them to work. The 3 columns don't switch from vertical to horizontal as well. Hope someone can help me out.
I just bought your slider templates and wanted to know how to delete one out of the three default sliders & how I might be able to add a new slider to the list. Thanks
If you want more control and don't want to bother with custom code, download Steroids for Elementor add-on that I made/released a while ago. Glider slider is a part of the package and it's based on the code that I presented in this video.
i have used your code to make a custom slider in a popup. It works but I am encountering a small problem. When I click the button to trigger the popup, in a split second, all the columns show side by side. Can you help me fix this? thanks!
Not sure if you have "Steroids for Elementor" add-on installed ... but if you don't - do it. There's an extension named Glider inside which is basically UI/UX friendly version of "Custom Slider in Elementor built with Elementor". I suppose that the glitch that you're talking about is coming from the JS code that's not rendered "natively", it's coming from the HTML widget and due to that reason there's a delay. Hope it helps!
Hi. Like always, great stuff. Do you think this could work with a dynamic picture gallery? It is hard or nearly impossible to find a widget that simply plays a slider from pictures out of a database...
@@jorgemarques2585 I've made one already a while ago but it has three columns instead of two ( cutt.ly/wucagWP ). You can change that in HTML widget, JS code.
@@OoohBoi It does work very nice this template, but the offset does not work it puts columns as 50% both, and there is no offset though looks all contained in screen.
Hi, need some help with your imported slider. I'm seeing a notice in the console Uncaught ReferenceError: Swiper is not defined at runTheCode. The issue is in this line var swiper = new Swiper('.custom-swiper > .elementor-container', {.... Everything works just fine, but I believe that the Elementor team updated the slider code and this is probably why this notice is showing up. Help would be very appreciated. Thanks.
Thank you so much for this!! it helped me a lot! I wanted to ask tho if its possible to add 2 of these sliders on the same website page. Because when I add them (even when they have different CSS classes names) one of them does not work. What should I do?
Please use Glider from "Steroids for Elementor" add-on! I've made Steroids a while ago, and one of the extensions is named Glider. It helps you to turn any Section with 2+ columns into the slider. Everything is settable via the standard interface. Ask Google about "Steroids for Elementor" if you want to find out more. The add-on is free and can be downloaded from the official WP plugins repo.
Just use my plugin "Steroids for Elementor"! There's an extension named Breaking Bad that allows you to tailor columns at will. Ask Google about please!
My question is not related to this video. My question is I duplicate posts(B, C, D) from one post(A) and creates so many posts. But when I search the post (B, C, D) the result is showing exact post but when I search the post(A) all the post including post(A) shows in the search result. Please help m to fix this. Please sir
when page loads i can see slider code all over the place(it goes supernova).it normalizes after 0.5 seconds....can you give a tip how to resolve this issue?
That's weird, I wish I can see that coz it must be fun. However, jokes aside, I think that's due to the hardware of your computer. Elementor IS resources hungry (both CPU and RAM) so it might take a fraction of time to "swallow" all the core code.
Hi! First of all, thank you for your time and tutorials. Based on your tutorial, I created several sliders. Mouse scrolling does not work well with vertical sliders. In fact, the vertical mousewheel demo on the Swiper page also gets stuck upon scrolling. Did you find a solution to this?
I've noticed many glitches while working on this one. Not all Swiper slider types will work across browsers and devices, so my advice is to stick to the basic stuff.
Great video Ohoo Boi! How can I set the slider height in tablet and mobile ( 600px or 100%vh in desktop too big for tablet and mobile) And how do I autoplay and fade effect? Thanks!
Well, that's where the media query or queries take place. Just google to learn more about it. When it comes to the default Elementor breakpoints, these will look like this: @media (min-width: 768px) and (max-width: 1024px) { /* tablet rules */ } @media (max-width: 767px) { /* mobile rules */ }
Hey there everything good but i have a problem i cant appply css to the arrows, when i inject the css you provide, it seems like overwriting it and its not well targeted. I checked it myself on the devtool browser and it shows me the following elements: :root { --swiper-theme-color: #007aff; :root { --swiper-navigation-size: 44px; } i tried to apply css to the root, but i think i cant from elementor becasue it woudn't allow me. It would be nice to hear from you. Thank you very much!
Just browsing your utterly brilliant work on gumroad & I have to say how great they all look! I'm thinking of purchasing a few packs, however how responsive are they on mobile/tablets? I'm a wedding photographer, so I need out of the box functionality - will these work ok without any need to add code, etc?
Thanks! Simply try to resize browser's window and you'll be able to figure out how things gonna look like on smaller viewports. Please note that these are importable Elementor PRO templates!
Great tutorial :), I do have an issue all my text on the slides disappear when returning to those slides and will appear again when I click on the slide itself. kindly please help me out in this. The rest of your guide was amazing!
It doesn't happen on my end so I can't tell. Maybe you could set the z-index of your Text Editor widget to some other value than the default one, something like 5. I'm just guessing, maybe that's not a problem at all...
I'm sorry to hear it doesn't work. Maybe you could simply download my plugin "Steroids for Elementor" and use "Glider" extension to compose your slider. That's how no need to code anything...
@@OoohBoi oh. i didn't used selector.. i was using only .custom-swiper .elementor-container .elementor-row { flex-wrap: wrap; } and if i use class custom-swiper then where should i put selector ..should it look like this .custom-swiper selector .elementor-container .elementor-row { flex-wrap: wrap; }
@@saudpardesi8598 .custom-swiper is the custom CSS class of the SELECTOR and in this case, SELECTOR should be the section. If you assigned .custom-swiper css class name to the section that you plan to turn into the slider then the following MUST work: .custom-swiper .elementor-container .elementor-row { flex-wrap: wrap; } ...however, in case you didn't assign any custom class to the master section, then this: selector .elementor-container .elementor-row { flex-wrap: wrap; } ...will do the job as well. But hence the rest of the CSS code relies on the custom css class name, you should definitely use it,
thanks for your effort , can i make the animation for the slider content Like heading - paragraph animated with Entrance motion effect or i must use attributes like in the tutorial. appreciate your respond , thanks in advance.
Motion Effects will work when the target item is out of screen visible area. Hence the fact slider slides are - so to speak - always visible (even though it doesn't look like they are), motion effects won't work. I gave it a shot while building the slider, I thought it would be a nice feature tho...
Thanks! purchased the files and the slider works beautifully in Elementor editor but not once 'saved' or in preview..It appears as 3 columns instead of the 3 slides. What could I be doing wrong?
Please check with the Console of your Browser developer tools. I suspect there's some javascript error. Or at least provide a hyperlink to the page so I can check by myself.
Hi, great content. Unfortunately, it doesn't work on mobile (the place where I needed it the most!). In fact, none of the variant works on mobile devices. It shows fine on elementor preview of tablets & phones but fails on actual mobile phone. I just imported the zip file template into elementor. What am I doing wrong ? Any suggestions ?
You can go to the Swiper's official website and look up for a mouse wheel control demo example. As far as I can tell it's possible ( swiperjs.com/api/#mousewheel ), so all you gotta do is to modify existing JS code a little bit.
first of all thank you for this tutorial, i have a question.. can i trigger the slider part with buttons? (for example: "button-a" will trigger "slide-a")
Whatever is possible with Swiper, it's possible with this custom slider too. Just go to Swiper's official website and find the demo that you are about to reproduce. Open custom slider in Elementor and modify javascript code towards your goal.
This works really well for me but it won't work if there are multiple custom sliders on one page. My issue is the icons I have set up as next slide buttons with onclick don't go to the next slide even though they work fine when only one slider is on the page. I tried giving the slides different classes like custom-swiper1 custom-swiper2 etc but that only caused issues even when changing the js and css code. I noticed another comment asked the same thing and you told them to use Glider but is there a way to do this without installing a plugin? If not is there a similar way to use icons as next slide buttons with Glider?
Ooh Boi, do I appreciate what you are putting out! Great job! Quick question: is there a way to change the transition form "slide" to "fade" or any other effect? Thank you!
Yes, it's possible. Whatever is possible with Swiper, it's possible with the custom slider. However, I STRONGLY ADVISE you to use my plugin "Steroids for Elementor" (it's free, just ask Google). One of the extensions is named "Glider", and it's a slider made out of section and columns, controllable via the Elementor interface (just like any other widget). No need for Elementor PRO!
Hello, please help. I'm making a slider with a two-column inner section in each slide (because i want to put text + picture), but in mobile I can't make the column width 100% bcs of the "nowrap" property given to it in the custom css. The text and picture now look squished (because they share 50% of the already small mobile screen) and it doesnt look good. Does anyone know how to fix this? Thankyou in advance!
Thanks for your purchase! However, I'm not sure I understood your question... is there any reference site or any other similar working example of what you're up to? It might help me understand the goal.
@@OoohBoi thank you for your response, can we make this priview site : inv.simanten.com/tyasdian with this tutorial? can you breakout how to make this site with elementor, please..
Sure it does. Just omit "navigation" and "pagination" params and add: autoplay: { delay: 2500, /* or whatever you like */ disableOnInteraction: false, },
This tutorial explains how it works and what it takes to build that kind of a slider. Training files are ready-made examples so you don't need to start from scratch. Hope it makes sense!
I've tried using this method with the new Elementor 3.0 and it crashes. Purchased your files if I did something wrong but they also crash. (everything is just a big white empty div) The problem is that I cannot add the new css classes to the elements with any method, they're just not there. Does anybody else having the same problem?
That's obviously the problem of Elementor. If I'm were your shoes, I'd re-install both Elementor and Elementor PRO. As a side note be sure you're running PHP7+ on the server.
Oh Boy..such a Man you are! Thank You soo much, me, ignorant, just love your videos, i keep liking your video, before i watch it, why? well..i know it's gonna be the righe video to teach me..i regret i'm not a millionaire (yet..), otherwise i would make a big donation to you. So hopefully, when i'll be able to make my things go on right, you'll be the first one to benefit of it.. ONCE AGAIN, THANK YOU SO MUCH FOR YOUR PRECIOUS LESSONS. God bless You!
My friend, I just purchased the code. May you please help me. I need to customize 3 columns in one row as it looks like an instagram slider, but with my own custom content. Thanks in advance!
Have you ever considered using Oxygen? Would love to see you do some stuff there as well as its much more flexible than elementor. You could go crazy with that I think !
*IMPORTANT NOTE!*
By default, the jQuery library in WordPress is enqueued on page FOOTER. Due to the fact that certain WP plugins dequeue jQuery library from the default location and enqueue it back on page HEADER, this slider worked for some people and failed to work for others. My fault coz I wasn't aware of that before.
*PLEASE take my apologies!*
Things have been fixed now and you can (re)download the corrected version of the jQuery code (both training files and Gist). Hence the fact I can't do any corrections in the video, an initial version of code will be shown.
Please pin this
@@ChristinaMcKay pinned!
@@OoohBoi Hi, I just bought your slider templates, already import the template but only working on vertical mode slider, its only me or somebody have a same problem?
@@DaniPratikno-btj same here
@@DaniPratikno-btj same here
Lots of people commenting this method is having issues. I started to implement it and then found Oooh Boi's plugin "Steroids for Elementor". The plugin can make most of these changes and has a whole lot more. As someone who prefers to make/style his own modules where possible rather than use heavily bloated Elementor Addon plugins this plugin is one of the best Ive found. Thanks!
Could you please re-do this tutorial now that we have flex-box functionality in Elementor?
Truly the best Elementor channel out there.
Had to make a custom slider, didn't know if this was a valid solution and found this video and then watched it... pure gold!
do you have an update version with the new elementor. i tried this and it didn't wrap the column
Same issue, no wrapper injected
Hey guy! Transform columns in 100% widht didn't work for me. There is another way to make the same effect?
same
Hi mate, I created a horizontal slider with an inner section. On desktop, it works great. But on tablet and mobile, the columns of the inner section stay next to each other instead of on top of each other. I tried to set the inner section column wide on 100% but no success. How to solve?
You can set the Inner Section column width per device in Elementor (just click that little screen icon next to the option name). Another option would be to use my Elementor add-on named "Steroids for Elementor". There's an extension "Breaking Bad" inside which allows you to manage Sections and Columns easy way.
Did you solve the problem?? Just wanted to know because i face the same problem, but changing the inner section column width for each device doesnt work
You are brilliant, sir. The first time I went through the tutorial though I got this error: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
But then I bought your tutorial code and it solved whatever the problem was. That was the best $1.45 I have ever spent in my life.
Awesome! Thanks for the feedback!
Thnx for this video, bought all products in your shop. Just to support what you are doing.
Thanks a bunch!
Hello! Oooh Boi, I just bought your fabulous slider templates, but it's not work on my end. I followed the Elementor lesson unfortunately still the same, please can you help me out
When you only say "it's not working", I can't do much but suggest to try again or maybe switch the Browser. Is there any JS error (use developer tools to check it out in the Console)? What other plugins you have installed? Is your PHP up to date? It should be 7.0 and above...
Essentially, I have created the plugin for Elementor that includes custom slider builder. My plugin is named "Steroids for Elementor", it's 100% free (ask Google) and the slider is named Glider. Check out the following video to find out more: th-cam.com/video/9t4vugF2Lok/w-d-xo.html
Sadly I don't think this works any more, as Elementor doesn't seem to have a row before columns?
When you load the page at first the slides don't load correctly (they are stacked beside each other making it look like a four-column section), then after a few seconds, it loads up the way it supposed to. How do you fix this issue?
There's a technical drawback to this method (the loading lag), however, if you use Glider which is the part of Steroids for Elementor add-on, you gonna have identical slider that loads as any other Elementor widget. Steroids for Elementor is free and can be downloaded from WP's plugins repository.
Oh cmon, that's insane! I could literally build a slider-website. You are a star!
There you go! A slider-website. If you plan to do that no need to lock the slide height. Just a thought...
Wow, what a magic. I am thinking about fully customize horizontal timeline, I did not find such online.
There you go! Glad to read you found it useful!
Very cool!!! Would there be an option to have buttons link to specific slide too? Or only next and previous?
"Steroids for Elementor" include the extension named Glider which is basically the same custom slider from this tutorial controllable via the user-friendly interface. Just Google for "Steroids for Elementor". Glider can be controlled via external links or the links inside its own slides. Tutorial on that topic is yet to come.
Hello
I just bought your fabulous slider templates but I am facing a small problem. I am using the vertical scroll template inside a section which is minimum height VH-100.
Because I want to convert it to section scroll later. Now as soon as Ib ring the slider template inside the section, the section height increases automatically.
Now how i get the slider to stay in the minimum width
please help.
Didn't I reply to your email already?
The CSS code is not working already on the new version of Elementor ?
.custom-swiper .elementor-container .elementor-row {
flex-wrap: wrap;
}
.custom-swiper > .elementor-container > .elementor-row > .elementor-element .elementor-column {
width: 100%;
}
Or am I something missing ?
The most likely it won't work on E3.0 because they decided to make the DOM leaner and remove "unnecessary wrappers". However, it still works just fine.
Nice tutorial!
How can you have multiple columns displayed at once but sliding only to the next? like a carousel
Did you mean something like this? cutt.ly/0gapWVg
Hi, I bought your file but none works ... can you help me!
Same
Thank you. You're the best Elementor TH-cam channel. Everything else is quite generic out there. I saw the elementor pro block vol. 1, should we wait til tutorial for that or is it out of the box? Good stuff man.
Tanks for the support! If you are asking about Atlanta Elementor Blocks, there won't be any tutorials with regards to this one, it's just a collection of importable blocks for those who build websites with Elementor. Or just for anyone else interested to see how complex layouts are built.
Really good, but one little Problem: After a refresh oder loading the site with a link, for a part of a second all three rows a visible. Is there any workaround to avoid this?
Please try to use the "Glider" extension from my plugin "Steroids for Elementor" (it's free, just ask Google). Glider is the interface-controlled version of the slider seen in this video.
Does the V2 work with containers instead of sections?
Hello there!, i have a doubt: if i want to add a button inside a column of the section slider that take me to the next section, what should i do to archive this?.
Did you mean "how to cross-link" slider slides? If true, please disregard this custom slider tutorial. Download my plugin named "Steroids for Elementor" (it's free, just ask Google for more info), and then use the extension named "Glider". You can set all up via Elementor editor interface and no need for Elementor PRO. Once you do that, you can import the Elementor template that explains how to control Glider from anywhere: cutt.ly/ybzphX7
@@OoohBoi thanks mate!, youre a genious!, keep up the good work!
Thank's man! I was wondering how to insert my favorite Slider into Elementor for quite some time. And suddenly - boom - I found your channel at TH-cam home page :) Keep doing great job!
Thanks for the feedback mate!
I'm listening through a headphone while I'm watching this and it sounds like you are sitting in a spacestation.
I hear lot of machine noise, blips, radiochatter
Are you in the ISS?
I am in my spaceship, currently over the Adriatic sea.
Will this work with the new Elementor Container feature?
Great tutorial and files!!! Is it hard to make one of these great sliders/swipers go on autoplay?
Just add "autoplay" parameter to Swiper init... Here's an example: github.com/nolimits4web/Swiper/blob/master/demos/280-autoplay.html
Cool. How can I load dynamic images with ACF so this would be a gallery slider for product images?
No, you can't do that. All of the columns added to the slider should be dynamic in that case, which means all the columns should rely on dynamic resource, such as the post or the custom post type.
Hi, with Elementor 3.0 and the removal of various wrappers, including .elementor-row, how does this now work?
It works fine but in case you're looking for more elegant solution download my Elementor add-on named "Steroids for Elementor" and use Glider extension to build your sliders.
Hi. Great solution. How to enable parallax on first slide. I would like to have on load effect.
Sep 2021 - Still working with this method without any compromises! Thanks a million for such an amazing tutorial. Really appreciate the effort. 👌🙂
salve ho appena comprato la slider ma quando carico il plugin mi da errore cme posso fare ?
Hey man this plugin container all include parameters in box-tool of elementor or i need follow all this steps this video tutorial.
To follow tutorial! But it'll be much easier if you download "Steroids for Elementor" and use the Glider extension which is nothing but the custom slider made out of the section and columns. "Steroids for Elementor" is free add-on for Elementor, just ask Google.
@@OoohBoi tnks... 👍
Great slider.
Can it be used to showcase posts with a featured image, title and description/excerpt?
Theoretically, you could modify Archive Posts widget towards that goal, however, as you probably know, Elementor won't let you edit the post item in the loop as if dealing with the single post.
@@OoohBoi I have to try it out, but I guess it should work with the free plugin Elementor Custom Skin which you can use to customize the loop item. Never tried it with JS included, but now I am curious enough to try that with your awesome slider as soon as I have time.
Looking to implement this with dynamic content for a testimonial slider! Is this possible? Thank you!
No, that ain't gonna work. 2 major reasons for that; Elementor does not allow more than 10 columns per section, and you can't create Columns dynamically.
@@OoohBoi Thanks for your response! Such a bummer 😞
Outstanding work!
I have just bought the custom slider template, but as long as I am trying to incorporate it into my editor, it keeps showing an invalid error in return. Wonder what the issue may be.
What's the error saying? On a side note, be sure to disable "Optimized DOM Output" (see Elementor > Settings >> Experiments tab)
I just bought the templates, however, I can't get them to work. The 3 columns don't switch from vertical to horizontal as well.
Hope someone can help me out.
Hi Oooh Boi, I just bought your template but I'm having problem using it. Any advice?
I just bought your slider templates and wanted to know how to delete one out of the three default sliders & how I might be able to add a new slider to the list. Thanks
Why the arrow pattern seem like weird ? both arrow also display on right side , and how can i change the arrow pattern to normal arrow pattern?
If you want more control and don't want to bother with custom code, download Steroids for Elementor add-on that I made/released a while ago. Glider slider is a part of the package and it's based on the code that I presented in this video.
Impressive, but how does it behave in portrait mode on a tablet / smartphone device ?
It's all good mate, just try to resize your browser's window.
Can't seem to force columns to become rows within a slide in mobile. Flex-direction:column instead of row.
Any suggestions?
i have used your code to make a custom slider in a popup. It works but I am encountering a small problem. When I click the button to trigger the popup, in a split second, all the columns show side by side. Can you help me fix this? thanks!
Not sure if you have "Steroids for Elementor" add-on installed ... but if you don't - do it. There's an extension named Glider inside which is basically UI/UX friendly version of "Custom Slider in Elementor built with Elementor". I suppose that the glitch that you're talking about is coming from the JS code that's not rendered "natively", it's coming from the HTML widget and due to that reason there's a delay. Hope it helps!
I'll try the plugin and see if it works through that method..thanks! Keep the content coming! Very helpful
Man. You're the best.
Just what I needed. You mind reader!
Thanks, brother.
Glad to read it landed on time 😅
How can I add these parameters?
Slides to display: 3 (of 5 total)
Slides to scroll: 1
Thank you so so much.
Best regards,
Hi. Like always, great stuff. Do you think this could work with a dynamic picture gallery? It is hard or nearly impossible to find a widget that simply plays a slider from pictures out of a database...
No, it ain't gonna work dynamically simply because you can't add new columns dynamically.
Is it possible to do this with 2 posts showing at same time and not just one? Thanks
Did you mean like WordPress Posts or talking about the two columns?
@@OoohBoi 2columns more like swiper style 🙂
@@jorgemarques2585 I've made one already a while ago but it has three columns instead of two ( cutt.ly/wucagWP ). You can change that in HTML widget, JS code.
@@OoohBoi 1000 Thanks, will take a look :)
@@OoohBoi It does work very nice this template, but the offset does not work it puts columns as 50% both, and there is no offset though looks all contained in screen.
Hi, need some help with your imported slider.
I'm seeing a notice in the console
Uncaught ReferenceError: Swiper is not defined at runTheCode.
The issue is in this line var swiper = new Swiper('.custom-swiper > .elementor-container', {....
Everything works just fine, but I believe that the Elementor team updated the slider code and this is probably why this notice is showing up.
Help would be very appreciated. Thanks.
Same here, same error but unfortunatelly it's not working anymore, the entire page gets blank.
Thank you so much for this!! it helped me a lot!
I wanted to ask tho if its possible to add 2 of these sliders on the same website page. Because when I add them (even when they have different CSS classes names) one of them does not work. What should I do?
Please use Glider from "Steroids for Elementor" add-on! I've made Steroids a while ago, and one of the extensions is named Glider. It helps you to turn any Section with 2+ columns into the slider. Everything is settable via the standard interface. Ask Google about "Steroids for Elementor" if you want to find out more. The add-on is free and can be downloaded from the official WP plugins repo.
@@OoohBoi OMG thank you so so much!! it works wonderfully! Your work is beyond helpful and awesome. BIG FAN HERE :)
If do not have elementor Pro, is the template purchase still work? As notice it using the widget custom CSS which only available for Elementor Pro.
I guess you'll need the PRO version this time.
Going to take a few attempts to master but as usual great content - bought Templates to support great channel & Tuts. Be well!
Thanks a bunch!
I'm having trouble changing the columns to 100% in the section using your code. Kindly assist. Thanks.
Just use my plugin "Steroids for Elementor"! There's an extension named Breaking Bad that allows you to tailor columns at will. Ask Google about please!
My question is not related to this video. My question is I duplicate posts(B, C, D) from one post(A) and creates so many posts. But when I search the post (B, C, D) the result is showing exact post but when I search the post(A) all the post including post(A) shows in the search result. Please help m to fix this. Please sir
I can't know the answer buddy, I guess something like that includes debugging.
when page loads i can see slider code all over the place(it goes supernova).it normalizes after 0.5 seconds....can you give a tip how to resolve this issue?
That's weird, I wish I can see that coz it must be fun. However, jokes aside, I think that's due to the hardware of your computer. Elementor IS resources hungry (both CPU and RAM) so it might take a fraction of time to "swallow" all the core code.
Hi!
First of all, thank you for your time and tutorials.
Based on your tutorial, I created several sliders. Mouse scrolling does not work well with vertical sliders. In fact, the vertical mousewheel demo on the Swiper page also gets stuck upon scrolling.
Did you find a solution to this?
I've noticed many glitches while working on this one. Not all Swiper slider types will work across browsers and devices, so my advice is to stick to the basic stuff.
Great video Ohoo Boi! How can I set the slider height in tablet and mobile ( 600px or 100%vh in desktop too big for tablet and mobile) And how do I autoplay and fade effect? Thanks!
Well, that's where the media query or queries take place. Just google to learn more about it. When it comes to the default Elementor breakpoints, these will look like this:
@media (min-width: 768px) and (max-width: 1024px) {
/* tablet rules */
}
@media (max-width: 767px) {
/* mobile rules */
}
Hey there everything good but i have a problem i cant appply css to the arrows, when i inject the css you provide, it seems like overwriting it and its not well targeted. I checked it myself on the devtool browser and it shows me the following elements:
:root {
--swiper-theme-color: #007aff;
:root {
--swiper-navigation-size: 44px;
}
i tried to apply css to the root, but i think i cant from elementor becasue it woudn't allow me.
It would be nice to hear from you.
Thank you very much!
Did you try to add the "!important" rule to the custom CSS rules that get overwritten?
Just browsing your utterly brilliant work on gumroad & I have to say how great they all look! I'm thinking of purchasing a few packs, however how responsive are they on mobile/tablets? I'm a wedding photographer, so I need out of the box functionality - will these work ok without any need to add code, etc?
Thanks! Simply try to resize browser's window and you'll be able to figure out how things gonna look like on smaller viewports. Please note that these are importable Elementor PRO templates!
@@OoohBoi Yeah that's fine as I am using Elementor Pro. They all look pretty good using chrome responsive tool in inspect.
Beautiful, interesting and useful. And that's a really reasonable price for the download. Good job!
Great tutorial :), I do have an issue all my text on the slides disappear when returning to those slides and will appear again when I click on the slide itself. kindly please help me out in this. The rest of your guide was amazing!
It doesn't happen on my end so I can't tell. Maybe you could set the z-index of your Text Editor widget to some other value than the default one, something like 5. I'm just guessing, maybe that's not a problem at all...
why mine cant work i have purchased it but i dont know how to use it im beginner any help?
I'm sorry to hear it doesn't work. Maybe you could simply download my plugin "Steroids for Elementor" and use "Glider" extension to compose your slider. That's how no need to code anything...
I have a question, how do you insert the pagination in between the contents?
This is DA BEST! I love your tutorials, so clever and so well presented. Thank you so much.
You are so welcome!
How can I rotate the prev/next arrows for Verticle slider??
You could try by using transform CSS property... something like: transform: rotate( 90deg );
Hiee... M facing an issue for column width... I put exact css code for column width 100% but its not working..
It looks like you ain't usin
selector .elementor-container .elementor-row {
flex-wrap: wrap;
}
rule on the outermost SECTION. Do you?
@@OoohBoi oh. i didn't used selector.. i was using only
.custom-swiper .elementor-container .elementor-row {
flex-wrap: wrap;
}
and if i use class custom-swiper then where should i put selector ..should it look like this
.custom-swiper selector .elementor-container .elementor-row {
flex-wrap: wrap;
}
@@saudpardesi8598 .custom-swiper is the custom CSS class of the SELECTOR and in this case, SELECTOR should be the section. If you assigned .custom-swiper css class name to the section that you plan to turn into the slider then the following MUST work:
.custom-swiper .elementor-container .elementor-row {
flex-wrap: wrap;
}
...however, in case you didn't assign any custom class to the master section, then this:
selector .elementor-container .elementor-row {
flex-wrap: wrap;
}
...will do the job as well. But hence the rest of the CSS code relies on the custom css class name, you should definitely use it,
thanks for your effort , can i make the animation for the slider content Like heading - paragraph animated with Entrance motion effect or i must use attributes like in the tutorial. appreciate your respond , thanks in advance.
Motion Effects will work when the target item is out of screen visible area. Hence the fact slider slides are - so to speak - always visible (even though it doesn't look like they are), motion effects won't work. I gave it a shot while building the slider, I thought it would be a nice feature tho...
Thanks! purchased the files and the slider works beautifully in Elementor editor but not once 'saved' or in preview..It appears as 3 columns instead of the 3 slides. What could I be doing wrong?
Please check with the Console of your Browser developer tools. I suspect there's some javascript error. Or at least provide a hyperlink to the page so I can check by myself.
@@OoohBoi thank you for the reply! The site is offline at the moment. I'll send an email with some links, if that's ok. Thanks again.
Hi, great content. Unfortunately, it doesn't work on mobile (the place where I needed it the most!). In fact, none of the variant works on mobile devices. It shows fine on elementor preview of tablets & phones but fails on actual mobile phone. I just imported the zip file template into elementor. What am I doing wrong ? Any suggestions ?
I gotta take a look and figure out what might be wrong. I will try to handle it this year...
@@OoohBoi Thanks! Please do let me know when you've fixed it. I recently purchased the bundle from the link that you mentioned.
Is that really the case? I just purchased the templates and like everyone I need it to work on all platform...
this year like 2020?
how to make slider autoplay in loop?
Like this: swiperjs.com/swiper-api#autoplay
@@OoohBoi thanks
Hi man. Plz also make video on how to display woocommerce featured products in carousel view on home page
There's an add-on for that purpose and I think it'll do the job decently: wordpress.org/plugins/ecommerce-product-carousel-slider-for-elementor/
Can you tell transperant header using elementor pro
How did you mean that?
@@OoohBoi i mean to say can i make transperent header using elementor
can this slider move with mouse scroll? i want to buy the slider!
You can go to the Swiper's official website and look up for a mouse wheel control demo example. As far as I can tell it's possible ( swiperjs.com/api/#mousewheel ), so all you gotta do is to modify existing JS code a little bit.
Hello I buy the template in your website but its doesent work
?
Thanks for the purchase buddy! Please try to go to WP Admin, Elementor > Settings : Experiments (tab), and then disable "Optimized DOM Output".
@@OoohBoi the answer is just perfect thank you! Do you know what I have to modify to deactivate the slide on desktop? thanks again
first of all thank you for this tutorial, i have a question..
can i trigger the slider part with buttons? (for example: "button-a" will trigger "slide-a")
Whatever is possible with Swiper, it's possible with this custom slider too. Just go to Swiper's official website and find the demo that you are about to reproduce. Open custom slider in Elementor and modify javascript code towards your goal.
This works really well for me but it won't work if there are multiple custom sliders on one page. My issue is the icons I have set up as next slide buttons with onclick don't go to the next slide even though they work fine when only one slider is on the page. I tried giving the slides different classes like custom-swiper1 custom-swiper2 etc but that only caused issues even when changing the js and css code.
I noticed another comment asked the same thing and you told them to use Glider but is there a way to do this without installing a plugin? If not is there a similar way to use icons as next slide buttons with Glider?
Ooh Boi, do I appreciate what you are putting out! Great job! Quick question: is there a way to change the transition form "slide" to "fade" or any other effect? Thank you!
Really amazing. Bougt both Atlanta blocks and this one. Thank you!
Thank YOU for the support!
Hello! Amazing tutorial and thanks for the template - this works far better Is it possible to autoplay the slider?
Yes, it's possible. Whatever is possible with Swiper, it's possible with the custom slider. However, I STRONGLY ADVISE you to use my plugin "Steroids for Elementor" (it's free, just ask Google). One of the extensions is named "Glider", and it's a slider made out of section and columns, controllable via the Elementor interface (just like any other widget). No need for Elementor PRO!
@@OoohBoi Amazing! thank you for the response!
I am always following your tutorial, Your Video is all-time best
Glad to hear that, thanks for watching!
do you have the code for arrows? thanks
What code, the CSS? It's all in the file...
@@OoohBoi Thanks
Hello, please help. I'm making a slider with a two-column inner section in each slide (because i want to put text + picture), but in mobile I can't make the column width 100% bcs of the "nowrap" property given to it in the custom css. The text and picture now look squished (because they share 50% of the already small mobile screen) and it doesnt look good. Does anyone know how to fix this? Thankyou in advance!
I just bought the tutorial files at Gumroad, can I be taught to make adjustments to the movement between sections just by clicking on certain buttons?
Thanks for your purchase! However, I'm not sure I understood your question... is there any reference site or any other similar working example of what you're up to? It might help me understand the goal.
@@OoohBoi thank you for your response, can we make this priview site : inv.simanten.com/tyasdian with this tutorial? can you breakout how to make this site with elementor, please..
Can this be done automatically? So without the buttons?
Sure it does. Just omit "navigation" and "pagination" params and add:
autoplay: {
delay: 2500, /* or whatever you like */
disableOnInteraction: false,
},
@@OoohBoi Works great! Thanks!
Do you have the JSON in the paid download ?
May I know where to we get those cs codes ?
Take a look at the vid description, there's a Gist link included...
Such an amazing tutorial, thank you for sharing all your knoledge.
Glad you enjoyed it!
Hi Man, If I bought the template you provided, do I need to follow this instructions? Or just import the templates we bought hehe
This tutorial explains how it works and what it takes to build that kind of a slider. Training files are ready-made examples so you don't need to start from scratch. Hope it makes sense!
I've tried using this method with the new Elementor 3.0 and it crashes. Purchased your files if I did something wrong but they also crash. (everything is just a big white empty div)
The problem is that I cannot add the new css classes to the elements with any method, they're just not there.
Does anybody else having the same problem?
That's obviously the problem of Elementor. If I'm were your shoes, I'd re-install both Elementor and Elementor PRO. As a side note be sure you're running PHP7+ on the server.
very cool video!
is this affects the SEO?
I don't think it does...
@@OoohBoi ok,thanks!
I bought the plugin, but on my wp it does not install, I upload the zip file, but falp's wp says that he didn't find any empty plugin, what happened?
It is not a plugin. Those are templates.
Incredible. Thanks so much for this tutorial - very useful!
Thank you for watching!
Oh Boy..such a Man you are! Thank You soo much, me, ignorant, just love your videos, i keep liking your video, before i watch it, why? well..i know it's gonna be the righe video to teach me..i regret i'm not a millionaire (yet..), otherwise i would make a big donation to you.
So hopefully, when i'll be able to make my things go on right, you'll be the first one to benefit of it..
ONCE AGAIN, THANK YOU SO MUCH FOR YOUR PRECIOUS LESSONS.
God bless You!
Oh, that's so kind of you mate! I wish all your dreams come true because if that happens I'll be sipping champagne too, right?
@@OoohBoi Yeap! You'll be immediately invited direclty to Italy, where I live..as much wine and sun as You want Amico!
when i paste code with width: 100%, it's not change the section
Very nice tutorial Oooh Boi..!! Have a much clearer idea on how I can implement all these different swiperssss!!!!
Thank you:-)
Glad you liked it!
When I add css to make column width 100% it doesn't work
Do you use that magical CSS code for making columns 100% wide?
selector .elementor-container .elementor-row {
flex-wrap: wrap;
}
@@OoohBoi yes I did
Thanks bro I found the issue
My friend, I just purchased the code. May you please help me. I need to customize 3 columns in one row as it looks like an instagram slider, but with my own custom content. Thanks in advance!
It's something like this I suppose : cutt.ly/0gapWVg
@@OoohBoi WOW! Thank you so much! This is just perfect!
Brilliant. This is one worth while video. Thank you! Definitely buying the pack
Thanks!
@@OoohBoi hi, I bought the 2 packs you have but it's only showing 1 that I am able to download...
@@YasienSarlie Oh, sorry to hear that! Please let me know your email address and I'll send the one that's missing right away. Which one is that?
It's the one done before this video. Yasien@sarlie.co.za
These videos are so gooood. Man if u were in the UK I would buy u a meal
Hope it's not an English breakfast 😰 Just kidding, thanks bro!
@@OoohBoi anything you like on the menu lol :)
ooooh boi you really did a thing here. thank you very much
Thanks for watching buddy!
Have you ever considered using Oxygen? Would love to see you do some stuff there as well as its much more flexible than elementor. You could go crazy with that I think !