How to setup Autoscroll infinite slider in WordPress with Bricks Builder
HTML-код
- Опубликовано: 12 окт 2022
- Learn how to extend the Bricks Nestable Slider to autoscroll infinitely.
Learn How to setup infinite logo slider
Learn how to setup product cards in Bricks loop builder
Bricks Builder | Oxygen Builder | WordPress | Tutorial
#wordpress #bricksbuilder #bricks
FOLLOW ON TWITTER: / udoroessien
FOLLOW ON FACEBOOK: / udoro
GET AUTOMATIC.CSS - A time saving utility class for WordPress websites
automaticcss.com/ref/37/
--------------------------------------------------------------
GET MOTION.PAGE - Interact & animate any WordPress site
motion.page/go/dwc/
--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder
recoda.me/workspace-store?via...
--------------------------------------------------------------
Get Breakdance - A record breaking visual builder for WordPress
breakdance.com/ref/50/
--------------------------------------------------------------
GET 20% OFF HOSTING PLAN FROM HOSTINGER
hostinger.com/?referralcode=1...
DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================
BOOK A 1-HOUR CONSULATION
calendly.com/designwithcracka...
=============================================
BUSINESS ENQUIRY: udoroessien@gmail.com
=============================================
Great! Exactly what I was looking for!
Excellent work! I'm new to bricks. I'm glad you are making these tutorials! Cheers!
It was great, learned so useful idea and tips from you, thanks so much
100% legend! Thank you for such great content!
im new with Bricks, would be great if you make series create full website sir, best practice from the global setting, archive, blog, search, sidebar, 404 etc. your video really helpful
I have a problem only on some mobile devices the slider restart when i scroll down and i dosent load the theird item in the collection any idea? on desktop i seem to work smooth
Hi there, it was a nice and easy solution back then. Maybe I would suggest to place bricks version to the description for the future. Now you can do all that kind of stuff directly from custom options. All by few tweaks in JSON format. So there is no need to use custom script (it is much cleaner approach). And if you want to have clickable card i would consider wrap it in instead of more css.
1. No, you can't autoscroll without the autoscroll extension, at least not properly, that's splideJS documentation. Even if you manage to get it working, it will not have the autoscroll features.
2. Wrapping the slide with an a tag has disadvantages
(i) The slide may have unexpected behavior while rendering especially if it has interactive elements within it.
(ii) If the slide has another link, it's bad practice to have a link or interactive element inside another link
@@DesignwithCracka
1. Yes if you want to use autoscroll then of course. On the other hand if you want to create infinite slider you don't need to use autoscroll. I am referencing this tutorial ruclips.net/video/vG4e-Mmhebs/видео.html. Which can be simplified with custom options.
2. Of course it may have. But as you've mentioned it depends:
(i) This depends on how you will build those interactive elements. If there is product card where you are using add to card button or so then of course youre right. I am pointing towards this tutorial where you are not using such things. In that case it can be done much easier.
(ii) If you want whole card clickable why would you place there another links :D.
I am new to youtube comments :D so sorry if I am not clear. Anyway I didn't know or there was no such evidence that you are planning to place there something more than I am seeing on the video.
Works great, how can I get this working on 2 sliders on a single page? It only works for one at a time, and I can't figure out how to separate.
Update the syncSliders() function like so:
function syncSliders() {
const main = bricksData.splideInstances['main-slider1'],
thumbnail = bricksData.splideInstances['thumbs-slider1']
main2 = bricksData.splideInstances['main-slider2'],
thumbnail2 = bricksData.splideInstances['thumbs-slider2']
if( main && thumbnail) {
main.sync(thumbnail)
}
if( main2 && thumbnail2) {
main2.sync(thumbnail2)
}
clearTimeout(initTimeout);
}
replace those IDs with yours
Hi the second part of ur video, when you assign the link to the whole card. We should use h3 tag for better seo, but when i use heading element with ur code, it doesn't work
Thanks. I’ll check this and update.
Great tutorial, thank you!
Everything works, but the scroll speed is a bit too fast. How can I reduce the speed?
add this to the custom options
"autoScroll": {
"speed": 1
},
adjust the value.
Either it doesn't work or I put it in the wrong place.
Right after new Splide( '#scroll-slider' ).mount( window.splide.Extensions );
?
@@pascalehrler Sorry I thought I showed the custom options in this video...
please check this video for how use the custom options. I've linked the exact timestamp ruclips.net/video/uujSswW4ue8/видео.html
@@DesignwithCracka finally, it works. Thank you for your efforts.
i have 3 groups of category. products, ingredients and instructions. i can only exclude one. how to i exclude instruction category?
Questions like this should be asked in the Facebook group where answers can be given with screenshots etc.
In the query loop there’s option to exclude terms. That’s where you chose the category to exclude.
Hey Cracka - 2 Questions:
1.) Is there a way to prevent pause on hover? I have it turned off inside the controls, but it doesnt respect it and still pauses on hover....
2.) How do you change the speed?
Did you manage to sort the speed? I've attempted to add the autoScroll and speed JSON option to the custom options part but it just breaks the element. Did you manage to get the speed adjusted successfully?
Follow your steps to set up automatic scrolling now. But why does it appear that it will jump a bit when it scrolls automatically, similar to the slideshow effect of turning the page, and then it will scroll next.
Make sure to turn off auto play. I turned mine off later in the video
Is it possible to do the same with WooCommerce products category images?
No, not without some custom PHP to query the category.
What software do you use for screen recording?
Camtasia
What if it stops and reset on mobile? can make it go all the way and show all products before restart?
sorry I don't understand
nice tutorial😍😍😍😍😍😍😍
🤣🤣 but the sound is bad
sorry about the sound
Thanks for the fantastic video. Everything works great for me. But the link is not clickable on mobile. I've used both methods to link the card ( tag on the whole wrapper and using absolute position on the title), but none worked. No issue on the desktop, only on a mobile.
The CSS fix from your previous tutorial didn't have the issue though. Please help confirm if this is a known bug at your end too.
Thanks for your time.
did you use 'inset' or left, right, top, bottom for the pseudo element?
@@DesignwithCracka I used inset.
root:before {
content: "";
position: absolute;
inset: 0;
}
The card is clickable on PC. Only had the issue on mobile.
Even when I wrapped the whole card as , the issue was still there on mobile. So I guess it's from the autoscroll extension, and not a CSS issue.
@@Claudius.a some browsers may not support “inset”. But I’ll check to see if I can reproduce the issue.
@@DesignwithCracka even when I didn't use "inset" and just linked post title directly to post_url, the post title element wasn't still clickable on mobile. I tried with other card elements. All worked fine on PC. The issue is only present on mobile.
can you share the code script sir?
Any help on swiper js with wordpress
The swiperJS website has a good documentation on how to set it up. Any reason you don't want to use the in built Nestable slider?
@@DesignwithCracka ya actually I started my theme building with HTML and CSS while swiper, on the other hand, had this wonderful setup, and now am trying to convert it to a dynamic WordPress theme but the issue is setting up the swiper to work
How can I place an arrow navigation icon into the infinite slider? So that the user decides to scroll manually instead.
Forgot to say, thank you for your tutorial Cracka. 🙂
You can enable the arrows, use the position options to place them were you want. Like I did it here: ruclips.net/video/uujSswW4ue8/видео.html
@@DesignwithCracka Thank you so much for your answer!
Is it the same on Oxygen?
No, Oxygen uses SwiperJS. Full guide - Oxygen dynamic slider
ruclips.net/video/sbJZAvXNjEg/видео.html
Is bricks responsive more than elementor?
It works pretty much the same fashion - you have the breakpoints which you can adjust if you want, or you can use more fluid values and units like clamp, min, max etc., which is a better way of making things responsive, and then only use the breakpoints (media query) for the details and such.
Nice tutorial, but you should invest in a good microphone, all sibilance consonants are annoying :(
I'll appreciate one from you as a gift :)