A real-world example.
In my previous article we explored how to use basic Alpine.js features inside Webflow. In this article we will develop an alternative navigation bar for the Slider component:
If you are in a rush and just want to see an example of how to interact with the Webflow component in Alpine.js, visit my demo site, Components page:
alpinejs-demo - Webflow
A project demonstrating how to use Alpine.js with Webflow. You can read the full explanation how to use it in my…
To use Alpine.js in Webflow, we will be using my library:
A simple script to allow using Alpine.js in Webflow designer. Read my related article on Medium to learn more. You can…
To initialize it, add the following code at the bottom of the
1. Create the Slider
First, add a built-in Slider component to our page via the Add elements menu:
Then set an ID of the slider to be able to refer to it later:
Note: you can use a class instead of ID if you prefer, but make sure that there’s only one element with this class on the page.
Finally, we will add a few slides with image backgrounds:
2. Initialize the Alpine.js Slider component
Slider component available in the above library.
To initialize this component, wrap the built-in Slider in a Div Block and add the following custom properties to it:
The first attribute creates the component by calling the
Slider function and passing Slider selector as a parameter. The second one makes sure that the initialization code gets called at the right moment.
You can learn more about extracting Alpine.js component logic by watching this excellent video.
3. Build an alternative navigation bar
Now we will create the following simple slider navigation bar:
First, let’s add the < and > buttons. In reaction to clicking them, we will be simply calling the
previousSlide function provided by the
Next we will add buttons that will scroll us directly to a specific slide. To avoid too much repetition we will use a loop. We will create a Div Block element with
x-for attribute equal to
(item, index) in ['Winter', 'Spring', 'Summer', 'Autumn'] and with a bind key attribute:
Inside this Div Block we will add a slide link element with the following custom attributes:
The first one is responsible for highlighting the active link, the second one changes the slide, and the third one displays the slide name.
After deployment, it should finally work as expected.
How it works?
If you are curious how the Alpine.js component is implemented, do not hesitate to check my library source code. I promise it’s pretty straightforward provided you know the powerful