@@websquadron sorry I haven’t explain myself 😅 I meant to disable this option at all, not to change the direction. I don’t want that visitors of the website can do the thing you show at time 0:20.
Thank you for this! Everything works great except when a new image is being brought onto the screen, it initially loads blurry, and then a second or 2 later it loads and is not blurry any more. Maybe it's one of my image optimization plugins? I tried turning lazyload on/off and it still does this :(
Yup that was it. I deactivated the "Image optimization service by Optimole" plugin and it fixed the problem. I'll just use another image optimization plugin that I've used before
Hello! Great explanation, and it worked. But here is the problem that I identified, that my Caurasal doesn't move by itself unless I drag it once and then auto play happens. Is there anything I am doing wrong? I even worked on the CSS part, but that doesnt seem help too
Hi Imran I've just followed your tutorial thank you it works pretty well. I'm having an issue though the images/items in the testimonial carousel are stacked vertically instead of horizontally. Not sure what's wrong? I'm using a flexbox container rather than columns & sections - would that be it? I've checked every possible setting and copied the CSS so not sure what I've done wrong.
Any idea on how to change the sliding direction? I would also like one that slides from left to right. A combo of two sliders in opposite directions would look great imo. Thanks for the original video, it is much appreciated!
Great tutorials as always! Is there any way to make the "Slides per view" responsive, so it changes based on the View Width, as we have very varying widths? E.g. My image is 100px with a padding of space between of 50px If my viewport is 1000px wide I can fit around 7, but if my viewport is 2000px wide, I can fit 14.
Very newbie here - working on an intern project. I can't thank you enough for this tutorial - very easy to follow and have everything working but I can't seem to get the title above the carousel - will only sit to the side?
@@websquadron Thank you so much - but that doesn't move the section title above the carousel like you have it (Over 37 years experience......) I used Layout Image Above for logo and name which is working perfectly
I’m trying to do this with the loop carousel but even w a linear timing function it’s staccato; starts and stops because there are inline styles from elementor with transition duration of 3500 or whatever you set then the inline styles set to 0, then adjusts its translate 3D calculation and the duration changes back to 3500 then back to 0 where it pauses .
Thanks a lot! Only one issue..when it scrolls to the beginning of a new logo it will stop for a millisecond causing it to be a little choppy. How do I resolve that?
Transition duration is on 3500 and autoplay speed set to 0. I've tried the transition duration at 3000 and 3800 as well, it still creates this split second stop when it scrolls to the beginning of a new logo @@websquadron
@@websquadron You're the best. Is there any way to specify a specific width in between images with css? The "space between" slider in the style settings seems to be percentage based - it's adding lots of blank space in between elements as the screen size increases, especially on a larger monitor.
interesting -- i cannot seem to make it work. It scrolls and works for a bit than it stops. Its the infinite part thats an issue. And I have no idea why. It will scroll all the way through but wait till all show before the next one loads. Not sure if there is a conflict somewhere with the infinite scroller? What I mean is 6 logos scroll and the infinite does not start again until 6 has left the screen.
@@websquadron yep. In fact, I can make it work for a bit, then it reverts back. The infinite scroller seems to be the issue. I have 6 slides. This tutorial has 7 slides but only shows 5 and it seemed to work perfectly. I can set it up, save it. Refresh the page. Its working. Go to another page, its not working. And then back to the original page, no longer working. This is not a site I built so elementor is not my choice of a builder. Any ideas?
@@websquadron I have that problem soo i have 6 slides to show and i want pause on hover if i have slides to scroll to 1 until this 1 come in view, i cant stop animation and pause on hover.But i need that
@@nanetuyes even for me it is not stopping on hover immediately, it is stopping after sometime not immediately. can you help me if you find the solution
I followed step by step but for some reason the logos appear all on one slide on top of each other instead of side by side. they then slide all together to reveal another vertical line of logos. Please help!
You're just showcasing what you use - so as long as you're using their logos - then that is free marketing for the company, otherwise you could say that any photograph where someone is wearing Nike clothing is breaching copyright too.
@@websquadron Ok ...sounds logical indeed...Thanks! As a starter with my business, I'm a little careful with stuff but thanks for the info!! Beneficial videos! Learning a lot from you!!
Just in case anyone spends two hours on this like me: If your logos are disappearing after the first scroll through add class="skip-lazy" after img but before src in the img html code. This disables lazy load (which was broken regardless of the lazy load toggle being switched) and fixes the problem. Phew
Thank you so much for an awesome tutorial! Is there any way to change the sliding direction on scroll? Like if I want it to move from left to right when I scroll down, but in the opposite direction when I scroll up?
When I use this, the logos that aren't initially shown (I have 10 logos and show 5 and then scroll the rest) they fade in while they scroll onto the screen. Anyway to remove this?
Awsome video! But, i was wondering if you could let me know how to set the slider to move to the right instead of going to the left? I think it's going to look lovely if i have 2 sliders; 1 at the top moving to the left and 1 at the bottom moving to the right. I wish u can help. thanks
@@websquadron The plugin I installed(Testimonial Carousel For Elementor) has a very strange interface and there are no options that you show in the video.I'm new to WP and it would make it easier for me to follow the tutorial.
add an empty container after the carousel, fill background with gradient from solid to transparent, set position to absolute and align to the left, set height to 100%, set z-index to 1. the gradient will be on top of the carousel and it will look like it blends into the background. duplicate the same container to cover the right side
@@MFX-Trading hmm - that happened to me when i placed it as image but worked fine as code! Mine got cut off on the left and right side, Don’t know why though. How did you save your logos?
Great. Very simple solution that works well. Though I think it needs a few more tweaks in Elementor regarding the responsive view (slides per view) on screen (5 on desktop like in the video, and maybe 4 on tablet, and 2 or 3 on mobile). Maybe you've mentioned that in the video, I was watching in the office without a sound, sorry. :)
Not really - because your logos could be affiliate links, or companies that you've supported or worked with. It's like some people putting Google Logos on even though they just use the products.
@@websquadronI dont know if I would be considered an affiliate or a supporter. The companies are auction houses, and I am a licensed wholesaler, so I do use the companies to source inventory. But I have no official business connection to most of them, other than being registered to bid through their sites.
@@websquadron it’s not useable for a client. Even though it’s not complex code I can’t hand over a project that requires them to code anything if they wanted to add a logo. If it was just my own site it’s fine. That’s all
I managed to apply it on a listing grid Just had to change the class And it took me a while to figure out what it is But thanks for the help You’re the best
literally you are the bestest teacher ever. been learning alot of things from you!!!!!!!!!!!!!!!!
Wow, thanks!
Oh man, You just saved me, I was struggling with it and searched on UA-cam and gotcha~~~
Thank You - Helped me earning $1000+ because I did not know how to do this
What a mad lad, always producing quality content, thanks a lot.
Always
I'll definitely use this on my next project. Cheers mate!
Great video! thanks! I was wondering how i can make sure the logo's are middle aligned on the horizontal axes. Now they are all aligned to the top.
Click on the advanced tab and select middle
@@websquadron It only allows me to change the vertical axes
Thank you, It was just what I was looking for!
Worked like a charm. Thank you sir!
Thanks for the video, 2 year later and still helps me alot
Is there any possible way to apply the same effect on a listing grid?
Is the listing grid with Elementor?
Yes,
Iv’e been trying really hard to make it work
But nothing’s doing the trick 🤦🏻♀️
I was looking for it. Excellent. Many Thanks.
oh boy thank you really so much as always you are great man! Keep it up!!!!!
Hi Imran, thanks alot for the video.
From Bobby in Bekasi - Indonesia
great tutorial! Thanks man!
Thanks for this! Is there a way to set a link to external URL for each image?
That's good Imran and useful tip about adding the URL into the content. I found that PSI message about image sizes so frustrating.
Yup - it always annoyed me.
A big thank you from France !!
You're welcome!
Hi, is it possible to remove the option to stop it and change the direction by mouse hover/click? I mean the thing you do at time 0:20. Thanks
The only way I can change it is to drag with my mouse the other way, but automatically not sure about that. I'll need to think about that.
@@websquadron sorry I haven’t explain myself 😅 I meant to disable this option at all, not to change the direction. I don’t want that visitors of the website can do the thing you show at time 0:20.
You said start from the scratch, but you didn't show how you come up with that black element or block with logo inside. :(
Thank you for this! Everything works great except when a new image is being brought onto the screen, it initially loads blurry, and then a second or 2 later it loads and is not blurry any more. Maybe it's one of my image optimization plugins? I tried turning lazyload on/off and it still does this :(
Yup that was it. I deactivated the "Image optimization service by Optimole" plugin and it fixed the problem. I'll just use another image optimization plugin that I've used before
Better to add in the WebP natively :) Glad you got there.
Hello! Great explanation, and it worked. But here is the problem that I identified, that my Caurasal doesn't move by itself unless I drag it once and then auto play happens. Is there anything I am doing wrong? I even worked on the CSS part, but that doesnt seem help too
Have you got any optimisation applied that is preventing the CSS?
This is so awesome. I didn't want to download a plug in or do any more code than what you demo'd.
Hi Imran I've just followed your tutorial thank you it works pretty well. I'm having an issue though the images/items in the testimonial carousel are stacked vertically instead of horizontally. Not sure what's wrong? I'm using a flexbox container rather than columns & sections - would that be it? I've checked every possible setting and copied the CSS so not sure what I've done wrong.
Are you adding the images to separate slides in the carousel?
@@websquadron yes separate slides
Any idea on how to change the sliding direction? I would also like one that slides from left to right. A combo of two sliders in opposite directions would look great imo. Thanks for the original video, it is much appreciated!
I had a solution to L to R, but that doesn't work now.
@@websquadron thank you for replying sir. Let's hope a 'fix' will come. 👍
@@77krikke77hey did you find any way to change it's direction ?
@@wweuncut171 No...
use image carrousel instead, use the same css as the video and it should work, image carousel has a build in button to change direction @@wweuncut171
Can a testimonial slider be vertical instead of horizontal? Is there a code snippet to achieve this effect? Thank you, Imran.
This is tricky and I'm still looking at this.
Great tutorials as always!
Is there any way to make the "Slides per view" responsive, so it changes based on the View Width, as we have very varying widths?
E.g. My image is 100px with a padding of space between of 50px
If my viewport is 1000px wide I can fit around 7, but if my viewport is 2000px wide, I can fit 14.
Good question.
Let me check and get back to you.
Do you know if it's possible to reverse the direction of the carousel? What would the CSS look like for this?
Did you find the solution?
Very newbie here - working on an intern project. I can't thank you enough for this tutorial - very easy to follow and have everything working but I can't seem to get the title above the carousel - will only sit to the side?
Hi. Set the Layout to be Image Above.
@@websquadron Thank you so much - but that doesn't move the section title above the carousel like you have it (Over 37 years experience......) I used Layout Image Above for logo and name which is working perfectly
Thank you so much. I wonder how to fade the edges. for better look. Please teach how to do that.
That video comes out soon
I’m trying to do this with the loop carousel but even w a linear timing function it’s staccato; starts and stops because there are inline styles from elementor with transition duration of 3500 or whatever you set then the inline styles set to 0, then adjusts its translate 3D calculation and the duration changes back to 3500 then back to 0 where it pauses .
Elementor have introduced a new feature to handle the marquee style now
@@websquadron even with loop items ? What is the feature/widget called?
@@clevermissfox WordPress > Templates > Floating Elements > Floating Bars
@@websquadron thanks ill check it out! Appreciate the tip
how is it possible to make the left and right carousel container fading off or blurred?
Add this to the Custom CSS for the Caorusel:
/* Ensure the carousel container is correctly targeted */
selector {
position: relative; /* Ensure the pseudo-elements are positioned relative to the carousel container */
overflow: hidden; /* Ensure content does not overflow */
}
selector::before,
selector::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100px; /* Fade width */
pointer-events: none;
z-index: 1;
}
selector::before {
left: 0;
Z-index: 2 !important;
background: linear-gradient(to right, white, transparent) !important;
}
selector::after {
right: 0;
background: linear-gradient(to left, white, transparent) !important;
}
Can you paste the css code that is needed around 05:22 here in the comments?
Thanks a lot! Only one issue..when it scrolls to the beginning of a new logo it will stop for a millisecond causing it to be a little choppy. How do I resolve that?
What speed have you got it set to?
Transition duration is on 3500 and autoplay speed set to 0. I've tried the transition duration at 3000 and 3800 as well, it still creates this split second stop when it scrolls to the beginning of a new logo @@websquadron
Thank you, the video and the CSS code was very helpful
hey how to change its direction ?
Thanks imran, happy diwali
Thanks! You too!
Hapy Diwali inderpreet singh G hope you are doing well in your life
Thank you for helping my carousel have swag! LOL
Any time!
thanks for this! one question - how do you add links to images & text in the slider?
Modify the img code to become:
@@websquadron You're the best. Is there any way to specify a specific width in between images with css? The "space between" slider in the style settings seems to be percentage based - it's adding lots of blank space in between elements as the screen size increases, especially on a larger monitor.
Thanks man. Weird because the image keeps showing only one image per view even though I clearly configured 5 same in the video
Difficult to help without a 1-2-1
Amazing 🤩 Thankyou
interesting -- i cannot seem to make it work. It scrolls and works for a bit than it stops. Its the infinite part thats an issue. And I have no idea why. It will scroll all the way through but wait till all show before the next one loads. Not sure if there is a conflict somewhere with the infinite scroller? What I mean is 6 logos scroll and the infinite does not start again until 6 has left the screen.
How many slides are you showing? And have you set it to show that. So if you have 6, the slides in the setting should be 6.
@@websquadron yep. In fact, I can make it work for a bit, then it reverts back. The infinite scroller seems to be the issue. I have 6 slides. This tutorial has 7 slides but only shows 5 and it seemed to work perfectly. I can set it up, save it. Refresh the page. Its working. Go to another page, its not working. And then back to the original page, no longer working. This is not a site I built so elementor is not my choice of a builder. Any ideas?
This is exactly what I'm after. Is it possible to include a transparent effect to the left and right margins to give a soft line?
Potentially yes with some overlap of an image on the left and right
@@websquadron как это сделать?
Really good work!
is it possible with that to have pause on hover and to work?
Yes, you can still have the pause on hover.
@@websquadron I have that problem soo i have 6 slides to show and i want pause on hover if i have slides to scroll to 1 until this 1 come in view, i cant stop animation and pause on hover.But i need that
@@nanetuyes even for me it is not stopping on hover immediately, it is stopping after sometime not immediately. can you help me if you find the solution
The video is really good, it helped a lot. How can I reduce the empty space between the elements in terms of width?
Reduce the padding :) Or crop the images
It's not working for me, it worked in the editor but it is not working on the live website, how do I sort this out?
Are you getting console issues? JS issues? Any optimisation affecting it? I can't diagnose the cause without seeing your site as part of a 1-2-1.
Hey firstly thanks for your elementor solution but I want one testimonial left or one is right ??
To go in opposite directions?
Great tutorial, mine is now sliding to the left, is it poossible to make it slide to the right?
Try adding this:
direction: rtl;
@77krikke77 hey did you find any way to change it's direction ?
I followed step by step but for some reason the logos appear all on one slide on top of each other instead of side by side. they then slide all together to reveal another vertical line of logos. Please help!
What settings have you added? Difficult to be sure without a 1-2-1
Is there a plugin to achieve this same result because I use the divi theme.
Could try using the css to apply to a divi carousel
If I right-click and save the WordPress or Elementor logos, can I get in trouble because it's not copyright-free?
You're just showcasing what you use - so as long as you're using their logos - then that is free marketing for the company, otherwise you could say that any photograph where someone is wearing Nike clothing is breaching copyright too.
@@websquadron Ok ...sounds logical indeed...Thanks! As a starter with my business, I'm a little careful with stuff but thanks for the info!! Beneficial videos! Learning a lot from you!!
Почему когда картинки заканчиваются, карусель останавливается и начинает в другую сторону работать?
Hi, im having trouble to locate the web address for the image in my media library. Please help me
Check your Media Library
Just in case anyone spends two hours on this like me: If your logos are disappearing after the first scroll through add class="skip-lazy"
after img but before src in the img html code. This disables lazy load (which was broken regardless of the lazy load toggle being switched) and fixes the problem. Phew
**Update, this error was coming from the Jetpack Lazy Load feature so disabling this in Jetpack depending on your setup is another fix.
great content. thank you.
mind blowing stuff!
I am unable to show the images via media links, if I add the image it is added for the name icon.
Difficult to assess without a 1-2-1
Thank you so much for an awesome tutorial!
Is there any way to change the sliding direction on scroll? Like if I want it to move from left to right when I scroll down, but in the opposite direction when I scroll up?
No. Will need some custom JS and I have struggled with that.
@@websquadron Hi Web Squadron, and is there a way to make it just slide in the other direction? Just from left to right?
@@shotbyrima hey did you find out aby way to change it's direction ?
use image carousel and use the same css as in the video. image carrousel has a build in button to change direction and it should work@@shotbyrima
When I use this, the logos that aren't initially shown (I have 10 logos and show 5 and then scroll the rest) they fade in while they scroll onto the screen. Anyway to remove this?
Have you tried decreasing the transition time and are the images a large file size?
@@websquadron I tried decreasing the transition time but didn't help. All my images are under 100kb. Does it matter that I am using .png files?
This also only seems to be happening when I view it either incognito or not logged in. When I am logged it in loads correctly
@@cassandrad07 Can you share a URL?
Awsome video! But, i was wondering if you could let me know how to set the slider to move to the right instead of going to the left? I think it's going to look lovely if i have 2 sliders; 1 at the top moving to the left and 1 at the bottom moving to the right. I wish u can help. thanks
That’ll need some custom JS
use image carousel add the code :) worked for me
hey did you find any way to change it's direction ?
Thank you! Helped a lot, appreciate!
Any plugins available that’s not elementor that can do the same thing?
There's lots of other plugins but I prefer to use EL Pro.
Can you show in WP exactly which plugin you have installed?
How does that relate to this video?
@@websquadron The plugin I installed(Testimonial Carousel For Elementor) has a very strange interface and there are no options that you show in the video.I'm new to WP and it would make it easier for me to follow the tutorial.
thanks for the video...really helpful..🤩
Thank you
❤❤❤great 👍
Пожалуйста, скажите, как убрать границы по краям, чтобы прозрачные были. А то видно как появляется из границы.
add an empty container after the carousel, fill background with gradient from solid to transparent, set position to absolute and align to the left, set height to 100%, set z-index to 1. the gradient will be on top of the carousel and it will look like it blends into the background. duplicate the same container to cover the right side
Thank you so much! Such a great help! :D
Bro if i want to change the direction how can i do that
You need to use the Elementor Carousel widget. It's in there.
Some amazing content! How can we make the same but vertical? not horizontal
I had a solution for this, but on the mobile it looked horrendous so still experimenting.
can you add targer URL each logo?
You good yes as they are components
Hello! The slider is not working in mobile. The loop won't work. Any solution?
It works for me - see https;//websquadron.co.uk
Could be based on your page or other optimisation.
I wont get the full image, just the round small standard image
Sorry, what do you mean?
@@websquadron When I put in the code or picture, it gives me a small round cut out. Not the full logo. Cant seem to get the full logo whatever I try
under style - image you can set the Border Radius to 0
@@AO85 still not getting the full image tho
@@MFX-Trading hmm - that happened to me when i placed it as image but worked fine as code! Mine got cut off on the left and right side, Don’t know why though. How did you save your logos?
Much thanks from here
Great. Very simple solution that works well. Though I think it needs a few more tweaks in Elementor regarding the responsive view (slides per view) on screen (5 on desktop like in the video, and maybe 4 on tablet, and 2 or 3 on mobile). Maybe you've mentioned that in the video, I was watching in the office without a sound, sorry. :)
Don't worry :) Of course, refine for the devices.
@@websquadron also, regarding these logos, was it not easier to add a class on them, and then use filter: grayscale(1) to make them black and white?
How to make it so that it’s not scrolling left and right but fading inward effect in an infinite loop?
That would need some thought regarding the css
For some reason when I try to do that, the image doesn't show
Are you using any optimisation plugins or snippets?
@@websquadron Not that I'm aware of
@@wotevermajorlooser Best to check. And if you add an image to the carousel without using my code does it still not work?
how can i use this same code for loop carousel ?
I did a video on the codes for that. I need to dig it out
This replace the marquee??
Yup :)
if i want the testimonial run left to right how is??
Try this in the CSS:
direction: rtl;
Maybe....
Excellent
Thanks
Do you need permission to have the companie logos on your website like this?
Not really - because your logos could be affiliate links, or companies that you've supported or worked with. It's like some people putting Google Logos on even though they just use the products.
@@websquadronI dont know if I would be considered an affiliate or a supporter. The companies are auction houses, and I am a licensed wholesaler, so I do use the companies to source inventory. But I have no official business connection to most of them, other than being registered to bid through their sites.
how to reverse the direction ? anyone please .....
selector{
direction: rtl;
}
How to make images as a link?
Add an image and then add the hyperlink
I need help from scratch
Do you need to book a 1-2-1?
thnks bro
🔥
is this guy doing marketing for canva pro?
No??
It's a pro feature
Yup my videos are always Pro
@@websquadron okay
You design is good. But it is hard for learning new person. Because you didn't make this slider from sketch.
I explained it
VAI YOU ARE INDIAN SO PLZ YOUR ENGLISH IS VERY .....PLZ YOU CLEARLY YOUR FLUENT.....
Well I was born in Britain…
No good. Dont' use this if you ever expect your client to do anything with it afterwards. bad hack
How is this a bad hack?
@@websquadron it’s not useable for a client. Even though it’s not complex code I can’t hand over a project that requires them to code anything if they wanted to add a logo. If it was just my own site it’s fine. That’s all
How do you add individual hyperlinks to the logos themselves?
Is there a possible way to apply it on a
listing grid in Elementor?
Yes you can use the loop carousel
I managed to apply it on a listing grid
Just had to change the class
And it took me a while to figure out what it is
But thanks for the help
You’re the best
thank you