Build With ACSS: Zendesk.com Home Page (Part 3 - Synced Slider Section)
HTML-код
- Опубликовано: 22 окт 2023
- It's time to tackle the synced slider situation - three independent sliders all synced together with an animated progress indicator.
For this, we'll be using the Frames Accessible Slider component: getframes.io/components/slider/
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @digitalambition
Four months later and finally took the plunge into this. Approx. ~4h of brain pain - I got it working. Now I can make pretty much anything with Frames sliders. This tutorial is awesome! TY again Kevin! Leveled up once again! *I cannot even describe the feeling of joy atm. lol. Like finishing a marathon or sth. :)))) Cheers. 🤙
+1 for making this a frame. I would have melted my brain doing that.
Awesome series Kevin! I love the way you teach. Looking forward to the next episode 💪🏼
Very impressive build, well done Kevin !
Following Kevin videos, buying ACSS and Frames is the best choice i ve made in 2023. Can't wait to see the responsive part of these sliders and hopefully we ll have a new frame:)
Thank you very much for the time you put into your videos. I have really learned a lot , your channel and ACSS's channel has been a game changer for me.
pure gold! i love this series!
Flawless Victory !
This is just excellent @Gearyco
This is a fantastic way to learn from an expert teacher. 🍎
Hey Kevin, this was a challenging section ... my brain is still hurting trying to figure this one out. That being said, this was a great video and a great segment in this series.
Awesome tutorial. It does take some thinking to do such a slider. I've been following your video and doing something similar on a project I'm working on at the same time.
It really helps to do what you're showing in a builder instead of just watching you doing it.
Thanks !
Love your style of teaching, thank you!
Another great one. Thank you.
love love love and enjoy this videos, thank you.
love this series, gj man!
amazing content !! thank you so much.
Thank you for this.
It's like watching a magician with this slider lol. ❤
Those synched sliders are crazy man - I've not seen anything like that before! That's some next-level shizz. I wonder if the slider nav should be above the rest of the elements in the DOM and then placed at the bottom with CSS order. Just thinking if I closed my eyes and was tabbing through it would be confusing to go thru one slide, then hit a nav and figure out that it controls what I already passed and have to go back up? Accessibility makes my brain hurt.
Yes it should. I’ll put that on the punch list.
@@AutomaticCSS nice work man, I can't get over that slider - super rad! And so much of it was just default to how y'all built it 😳
Congratulations Kevin spectacular tutorial! How does the responsive part work? Will it be a new component of Frame?
Yeah most likely
@@AutomaticCSS Since you have already made those sections that have not been in the Frames before, maybe include them in Frames as components? Not only that slider, but also blog section and grid CTA?
Amazing Video! Did you cover the animation delay of just the Media slider?
Nice video Kevin. Been looking at Brick's interactions to try and animate, but it seems to add a fair bit to the DOM of the elements. I'm guessing you're not ever going use that?
I use interactions all the time. It doesn't add dom elements, just dom data. No real issues there.
Great video again Kevin, I watched you setting the blockquote logo to a width, but what if someone not technically connected adds in a vertical logo e.g. 200px height and 50px wide... then having that changed to a width of 180px will make it huge.
Also, in the end of the video you can see 2 nav tabs were having the active border visible
re: logo - You can change to using height if you want, but then your super wide logos might be tiny. Everything has a tradeoff.
re: active border - No, one had active border, the other had a focus style. The focus style happens to match, which I'll likely change to make the focus style more clear and not look the same as the active tab.
This is next level. I did notice during the slider navigation, there is some visible overlap between the sliders…hopefully, that can be addressed easily. Also, please any chance you can move your face over when you are selecting the right structure so it is easy to know where you are applying your custom css…thanks
Not sure what you mean by overlap.
@@AutomaticCSS as the slider is changing in your version, the prior image is still slightly visible. In the live zendesk site, the previous image slider disappears immediately
Super video Kevin - learned a lot. How would it translate on mobile?
We will do mobile at end of
Kevin, will you be adding this as a Frame?? Please...... :p
Yeah
Do you know when it will be added?
@@AutomaticCSS
Does putting more wrappers extend the time of rendering the webpage?
No. Not the few we use. If it’s divception like Elementor and divi then yeah.
Hi Kevin, do you think this would be possible to do where by the image on the right is a background image for the whole section?
I probably wouldn't recommend doing it that way. I'd have to see the proposed design.
Hi Kevin, have you got a working version of this that i can test on Safari because i'm having huge headaches with it not working on Mobile@@AutomaticCSS
Would the new Automatic CSS have a class manager?
No, that's too much of a major builder feature. We can't build those kinds of things for every supported builder.
Also, how can we reuse Data Attributes and Manage those as well?
Not sure what you mean? They're organized and maintained on a per-project basis, in a stylesheet, according to the needs of that project.
Hey can you please share this demo build with us so that we can download and import it for practice.
Thanks
Not sure how to do that without giving away the plugins.
Syncing sliders is only possible with Frames?
I’m not sure if the native bricks sliders support sync