People experiencing jittering on smaller screens (tablet/ mobile landscape/ mobile portrait) - under Autoplay > Interval in ms > Enter value 6000 (same as Speed in ms). That solved the problem for me.
Hey Imran and fellow Squadroneers! I'm following along with this technique but it's not Rewinding at the end of the AutoScroll. I used some AI to add a smoother fade effect. Any suggestions to get it to rewind?? So far, this is the CSS I'm using: root :where(.splide__list, .splide__slide){ autoScroll: { /*speed: 2;*/ rewind: true; } animation: fade 1s ease-in-out; transition-timing-function: linear !important; } root :where(.splide__list, .splide__slide-active) { animation: none; } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
Thanks for this tutorial. It looks way better than the standard carousel. However, the slider is not sliding smoothly, even with the CSS code provided. I am not sure why this happens. Any ideas on how to fix this on Bricks v1.9.1.1?
It used to be elementor. Now it's bricks. You have such valuable content, please stop putting into containers. What after bricks? Sorry, who am I to say anyone should think outside the box
Hey Rand :) I'm putting them into Containers for an ulterior motive - and that will become clear next week.... when.... I add Menu Anchors.... hehe. :). :)
That little snippet of code for the "smooth movement" helped me a lot, thank you!
Excellent post!
People experiencing jittering on smaller screens (tablet/ mobile landscape/ mobile portrait) - under Autoplay > Interval in ms > Enter value 6000 (same as Speed in ms). That solved the problem for me.
Imran, enjoyed this video -- great design option
Brill thanks was planning to do something like this so this code is going to help a lot!
loved this, very useful information, thanks!
Hey Imran and fellow Squadroneers! I'm following along with this technique but it's not Rewinding at the end of the AutoScroll. I used some AI to add a smoother fade effect. Any suggestions to get it to rewind?? So far, this is the CSS I'm using:
root :where(.splide__list, .splide__slide){
autoScroll: {
/*speed: 2;*/
rewind: true;
}
animation: fade 1s ease-in-out;
transition-timing-function: linear !important;
}
root :where(.splide__list, .splide__slide-active) {
animation: none;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Great video. Helped me alot. Thanks!
Very cool n smooooth
Curious Imran is this your fav page builder now days?
I still use EL :) Just getting lots of Bricks out for October as part of my learning and for you all.
Hi, I tested and the mobile version is Jumping in Android (at least). How is it at your side ?
I don’t use android
Thanks for this tutorial. It looks way better than the standard carousel. However, the slider is not sliding smoothly, even with the CSS code provided. I am not sure why this happens. Any ideas on how to fix this on Bricks v1.9.1.1?
I'll try to revisit and see if we can make it smoother.
@@websquadron I think the version in your tutorial runs smoothly; mine has 1 little stop. So I think it is on my side.
%root% :where(.splide__list, .splide__slide){
transition-timing-function: linear !important;
}
this should be work - I use 1.9.2
Thanks @@iqbalmauludy
@@joshuamatzner6133you’re welcome. 🎉🎉
Stopped working for IPhone as well as android. It is constantly jittering around.
Nice!
Thanks!
Wow, what speed, Mine is 47 down and 18 up 😥😥😥😥😥😥
It used to be elementor. Now it's bricks. You have such valuable content, please stop putting into containers. What after bricks? Sorry, who am I to say anyone should think outside the box
Hey Rand :)
I'm putting them into Containers for an ulterior motive - and that will become clear next week.... when.... I add Menu Anchors.... hehe. :). :)