Interacting with the Webflow Slider Component using Alpine.js

A real-world example.

Photo by Philipp Lublasser on Unsplash

Webflow components, such as Slider, Tabs or Lightbox, are very powerful, but their internal structure can sometimes be too rigid to style them as desired. You may also need to combine multiple components together. To solve these problems we need to write a bit of glue code. This can be done using imperative JavaScript or jQuery, but we will achieve the same effect with reactive Alpine.js code.

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:

TL;DR

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:

Getting started

To use Alpine.js in Webflow, we will be using my library:

To initialize it, add the following code at the bottom of the element:

<script src="https://cdn.jsdelivr.net/gh/loomchild/webflow-alpinejs@latest/index.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

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

Alpine.js allows the extracting of complex components from HTML markup into a dedicated JavaScript file. To interact with Webflow Slider, there’s a 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 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 or function provided by the component:

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 attribute equal to 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.

Conclusion

As we can see, interacting with the native Webflow component in Alpine.js can be quite intuitive thanks to reusable components. This allows us to focus on writing responsive code in the Designer UI, without any need to write imperative JavaScript to glue the two technologies together.

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 JavaScript API. I will also write an advanced article about developing such components in the near future.

Full-Stack Developer / Agilist / Free and Open Source Software Fan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store