How to setup Autoscroll infinite slider in WordPress with Bricks Builder

Рет қаралды 7,268

Жыл бұрын

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
=============================================

Пікірлер: 52

@HenrikHarrell Жыл бұрын

Excellent work! I'm new to bricks. I'm glad you are making these tutorials! Cheers!

@thijs7448 Жыл бұрын

Great! Exactly what I was looking for!

@mehdimoradi603 Жыл бұрын

It was great, learned so useful idea and tips from you, thanks so much

@laurenwilliams4098 4 ай бұрын

100% legend! Thank you for such great content!

@evandurant8527 13 күн бұрын

Thanks for the tutorial! Works like a charm except for one small thing : the number of elements that I define as showed in the larger screen =>2560 works for 2560 (it shows 10 elements as defined) but doesn't work for a 3440 wide screen, it only shows 5 as the default size screen...

@shendrong3695 Жыл бұрын

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

@martinmartin9032 Жыл бұрын

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.

@DesignwithCracka Жыл бұрын

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

@martinmartin9032 Жыл бұрын

@@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 kzfaq.info/get/bejne/rK1kmJB-0s7Jkqc.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.

@klokkerholm1993 Жыл бұрын

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

@tahor Жыл бұрын

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.

@DesignwithCracka Жыл бұрын

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

@mehdimoradi603 Жыл бұрын

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

@DesignwithCracka Жыл бұрын

Thanks. I’ll check this and update.

@pascalehrler Жыл бұрын

Great tutorial, thank you! Everything works, but the scroll speed is a bit too fast. How can I reduce the speed?

@DesignwithCracka Жыл бұрын

add this to the custom options "autoScroll": { "speed": 1 }, adjust the value.

@pascalehrler Жыл бұрын

Either it doesn't work or I put it in the wrong place. Right after new Splide( '#scroll-slider' ).mount( window.splide.Extensions ); ?

@DesignwithCracka Жыл бұрын

@@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 kzfaq.info/get/bejne/q9uahtaovJrZlWw.html

@pascalehrler Жыл бұрын

@@DesignwithCracka finally, it works. Thank you for your efforts.

@dichen4495 Жыл бұрын

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.

@DesignwithCracka Жыл бұрын

Make sure to turn off auto play. I turned mine off later in the video

@WebsiteStudiosOfficial 8 ай бұрын

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?

@dafphillips3089 5 ай бұрын

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?

@Claudius.a Жыл бұрын

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.

@DesignwithCracka Жыл бұрын

did you use 'inset' or left, right, top, bottom for the pseudo element?

@Claudius.a Жыл бұрын

@@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.

@DesignwithCracka Жыл бұрын

@@Claudius.a some browsers may not support “inset”. But I’ll check to see if I can reproduce the issue.

@Claudius.a Жыл бұрын

@@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.

@stewber Жыл бұрын

What software do you use for screen recording?

@DesignwithCracka Жыл бұрын

Camtasia

@artisanbusiness1314 Ай бұрын

i have 3 groups of category. products, ingredients and instructions. i can only exclude one. how to i exclude instruction category?

@DesignwithCracka Ай бұрын

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.

@mateakovacevic5855 Жыл бұрын

Is it possible to do the same with WooCommerce products category images?

@DesignwithCracka Жыл бұрын

No, not without some custom PHP to query the category.

@reneklokkerholm1453 Жыл бұрын

What if it stops and reset on mobile? can make it go all the way and show all products before restart?

@DesignwithCracka Жыл бұрын

sorry I don't understand

@Peter-Asztalos Жыл бұрын

How can I place an arrow navigation icon into the infinite slider? So that the user decides to scroll manually instead.

@Peter-Asztalos Жыл бұрын

Forgot to say, thank you for your tutorial Cracka. 🙂

@DesignwithCracka Жыл бұрын

You can enable the arrows, use the position options to place them were you want. Like I did it here: kzfaq.info/get/bejne/q9uahtaovJrZlWw.html

@Peter-Asztalos Жыл бұрын

@@DesignwithCracka Thank you so much for your answer!

@danieleromano7442 Жыл бұрын

Is it the same on Oxygen?

@DesignwithCracka Жыл бұрын

No, Oxygen uses SwiperJS. Full guide - Oxygen dynamic slider kzfaq.info/get/bejne/qch6jaSnvbTOdZs.html

@KomentarSaya Жыл бұрын

can you share the code script sir?

@mlhscanada1069 2 ай бұрын

Is bricks responsive more than elementor?

@einatblackrose 2 ай бұрын

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.

@scotly_emi Жыл бұрын

Any help on swiper js with wordpress

@DesignwithCracka Жыл бұрын

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?

@scotly_emi Жыл бұрын

@@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