Building A Hero Section With a Slanted Carousel in Bricksbuilder
In this video, I demonstrate how to create a hero section with a slanted image carousel. I explain the steps to create a carousel list with images and show how to set the block to fill the whole screen. I also cover setting the timing function, iteration count, and animation direction. I will provide helpful tips and tricks throughout the tutorial.
Check it out live:
https://training.bricksmaven.com/temp...
Chapters:
00:00 Introduction
02:30 Setting the Scene
06:42 Creating the carousel list
13:50 Adding Columns
16:05 Adding the Animation
20:20 Setting the animation keyframes
23:28 You need enough images to fill the height or else you will get empty spaces. Let me show you.
25:13 Rotate Carousel List
26:55 Fixing the other Breakpoints
31:43 Locally scoped Variables
38:08 Query loop
44:59 Conclusion
--------------------------------------------------------------------------------------------------------
Get the Alpha template and speed up your development process
If you are interested in getting this block go to www.bricksmaven.com and get yourself a license which will give you access to 500+ blocks. We support ACSS, CORE and vanilla CSS.
Get access to 100+ blocks for Bricks builder for free
Visit Bricksmaven and test the Alpha template for free, You get access to 100+ blocks which you can copy and paste in your projects and use forever. The free gift comes with 3 different version: ACSS, CORE and Vanilla CSS. Try it out today, visit https://bricksmaven.com/#pricing
Get the Automatic CSS framework | https://automaticcss.com/ref/3/ |
Voted #1 Framework For WordPress Page Builders. Automatic.css (ACSS) is consistently voted the best framework for WordPress because it combines innovative features, True Builder Integration™, best practices, unparalleled support, and education.
Get the CORE Framework | https://coreframework.com/ |
Supercharge your web design game with Core Framework's robust toolkit to manage, organize, and reuse your stylesheets. Seamlessly create, customize, and control every aspect of your project with our unique visual GUI.