Using variables with tabs?

Hello! I apologize up front for not really knowing how to ask this question. I would like to explain what I did and then explain what my client wants:

On this site that I’m building for a client, there is a section on the home page called “A New Beginning”. In this section are 4 tabs. Each tab contains 4 image divs (image is set as the background for the divs, I’m not using image elements). On each tab, under the image divs, there are 2 identical “click to zoom” buttons laid on top of each other. To the user there appears to only be one zoom button. When the user clicks the zoom button, each of the 4 pictures on any given tab are rotated through. I came up with this design on my own with my limited programming knowledge, so it may not be the prettiest thing in the world and there may be a better way to do it… but basically the 2 zoom buttons are either showing or not showing based on interactions on the click of the button, and with each click the user can rotate through all 4 images on each tab. It may be easier to understand this when you click around and see the way it’s laid out.

Anyway, this click to zoom thing works pretty well I think, but here’s where my question comes in. As it stands now, the images display on the tabs based on how many times the user clicks the button on that tab. So on the first tab, if you click the button once, you’re on the 2nd image. Then if you click the 2nd tab, you’re on the 1st image (or where ever you left it if you’ve already been clicking around). The client would like it if the user could (for example) go from the 2nd image on the first tab to the 2nd image on all the other tabs automatically, without having to click the zoom button on each tab. If the user is on the 3rd image on the 1st tab, he wants the user to land on the 3rd image on all the other tabs when those tabs are clicked on. I really hope that makes sense! :slight_smile:

I thought maybe I could use variables of some sort to go from tab 1 image 2, to tab 2 image 2, to tab 3 image 2 etc, but I am really only familiar with HTML and CSS at this point so I’m not sure what other language I could use to accomplish this and then how to accomplish it with that language. If anyone could give me any help or tips or advice I would really appreciate it. Please view the site and click around the tabs and zooms to see what I mean.

Thank you!


Here is my public share link: https://preview.webflow.com/preview/rampage-c8a727?preview=1b10deaea052003e2899a884a1113087
(how to access public share link)

Hi @JoyfulLori Welcome to the community :smiley:

Are you trying to do a zoom in and out type of interaction?

If so, you can achieve this by adding a slider within your tabs. Then change your slider transition to crossfading

Hope this helps :smiley:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.