Switch Between Process Steps (Tabs vs ?)

Hey there,

I’m trying to create a three-step tab-based process where, when you click the left or right arrows:

  1. the paragraph will switch to the next step
  2. the 0X number changes to the next one
  3. the small text on the bottom right will change for the next subtitle topic

I’m running into an issue where tabs doesn’t really give me an option for the arrows or really to conform the layout in this 12-col grid style.

any advice would be highly appreciated!

Here is my site Read-Only: [LINK][1]

swiper.js is what you want.

It is possible to use tabs in this way, e.g. using SA5’s Tabs extensions. But what you’re showing above doesn’t actually have tabs- it’s a carousel.

Any chance you have a supplementary resource to follow that breaks down implementing this? The number changes is also a bit over my head as things change.

I don’t have any implementation walkthroughs, mostly because each implementation I do is a bit different for each client.

But I do have some notes here and links to a few good resources that should help-

Thanks! :slight_smile:

The thing I’m struggling with is having it display just one step at a time — the implementation I have with the swiper keeps everything together on one screen despite the class sizing.

Is there any chance you might be able to note any considerations/stylings for the purple items highlighted (which are connected to the CMS) with this “unusual” layout?

I’m not sure what you mean, but Swiper.js is a JS lib, so it acts only on the published site.

In the designer, you’ll see everything, which can be confusing.
If that’s what you’re referring to and it’s causing problems for you, I use a special technique I refer to as a Designer Hack.

  • Drop an HTML embed on the page
  • Write CSS specific to how you want the design view to look- hiding additional items in that slider view, or hiding modals, etc.
  • Give that HTML embed a custom attribute or custom class
  • At runtime, have JS find and delete those embeds

It’s a hack, but since I’m constantly doing work for other designers and agencies it’s important that the designer experience makes sense visually.

Drop me a line if you need some dev work done, I’ll have a bit of time freeing up towards the end of next week.

I am able to get around seeing everything, but switching between the steps (from one CMS step-item to another) is not functioning.

I’ve watched Timothy’s videos over and over and I feel like an idiot. I’m not catching something — or understanding how this applies to this use case.

For example:

  1. In this video (https://www.youtube.com/watch?v=Qn1qL3TGMug), at 1:52, Tim sets the width of the swiper-slide to 33% so three images display at once. If I’m trying to have one quote displayed at a time, I should set that at 100%, right? (When I do that, the designer is cleaned up and simply displays the one quote).
  2. After Tim adds SwiperJS and the custom code, the published page allows for slipping between the instances. This does not happen for me. I don’t get it…

Would it be too much trouble to shoot a quick Loom video to show how this might be built?

It’s not that simple, everything depends on your element arrangements and swiper configuration. I can’t effectively debug it in a few seconds with just a readonly link.

Watch the other videos I linked as well, and you’ll find a bunch more on youtube. There’s a swiper.js page just one Webflow as well, so google “webflow swiperjs” and you’ll find a lot of resources.

Check Make in Webflow for swiperjs cloneables - this will show you live Webflow integrations that work and you can unpack them.

When I’m integrating, most of my time is spent in the swiperjs API docs, their examples page, and then in my published prototype using chrome devtools to test HTML adjustments.