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...
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 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.
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
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 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 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.
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
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?
@@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
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 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
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.
![Kodak Black - Catch Fire [Official Music Video]](http://i.ytimg.com/vi/A4ch-olIuZo/mqdefault.jpg)
Hello, thank you for this!
100% legend! Thank you for such great content!
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...
Excellent work! I'm new to bricks. I'm glad you are making these tutorials! Cheers!
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 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.
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
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.
It was great, learned so useful idea and tips from you, thanks so much
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
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?
Great! Exactly what I was looking for!
What software do you use for screen recording?
Camtasia
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.
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.
Is it possible to do the same with WooCommerce products category images?
No, not without some custom PHP to query the category.
Is it the same on Oxygen?
No, Oxygen uses SwiperJS. Full guide - Oxygen dynamic slider
ruclips.net/video/sbJZAvXNjEg/видео.html
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
Great video but it would be nice if you share the code used
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
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
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!
can you share the code script sir?
Nice tutorial, but you should invest in a good microphone, all sibilance consonants are annoying :(
I'll appreciate one from you as a gift :)