Tab Anything + Card Designer for hero video slider

Hi All, I am trying to find the best way to create a slider with video content.
Here is an example of what I am looking to create:
https://someoneinlondon.com

The key elements I am hoping to be able to include:
-video content in slider
-create unique text for each slide
-the buttons/tabs look like they are part of the slider and preferably could be minimal lines similar to how they are in the site referenced.
-could be set to autoplay

Could this be achieved with Tab Anything? Or combo of Tab Anything and Card Designer?
I have purchased Card Designer by @Whittfield . I have not purchased Tab Anything, but would if this effect can be achived with it.

Thanks in advance for your time and input on this!

You can do this by using the structure group 2 Blocs and adding a text overlay.
Kapture 2021-10-09 at 12.38.48

Thanks so much! Just curious is your example (using the 2 Block structure) for the slider/carousel in www.someoneinlondon.com? It looks like your example refers to the case studies on the site below the slider.

Your example doesn’t show how this would work with Tab Anything, but I’m assuming that if this example was used with Tab Anything, then it would become a slider/carousel?

Just to clarify, what I’m hoping could be achieved with Tab Anything (+Card Designer). Some effects I’m hoping to recreate:
The slider is a hero (with nav/menu overlay)
Slider has video + text for each slide.
Slider has buttons you could customize.

If you could provide just a little more info on how to do with Tab Anything that would be extremely helpful. Thanks again for your advice and time!

I tried recording a screen grab of the slider to clarify what I am referring to. I posted the video, hopefully helps to show what I am hoping to do.
https://player.vimeo.com/video/627581210

Not sure if Tab Anything is the right product for this. I would say @Whittfield’s Card Designer is the way to go if you want an easy solution. If you’re more adventurous you can create your own text overlay for any background. There was a topic with some downloadable samples not long ago. You can find it here:

Tab Anything makes this easy @byronjenny , @Jerry . There’s a caveat of fullscreen not being compatible, but you can set a height or use the content to determine height. other than that it’s nearly identical to the comparison and you can add animations etc. here’s a super quick demo.

I like to use “spacer” divs for this because they can be set per breakpoint if needed. But, if I had to do a lot of them I’d use css and set a height.

when time allows I will try to see what can be done to make fullscreen (100vh) or workaround to get that result as well hopefully :crossed_fingers:t5:

4 Likes

Great video @Whittfield

I’d love you to see more of these showing your amazing brics!

Is this something that can be in just Pro. version?
I’m trying to see what the big difference is from the 2. Is there any examples showing tabs vs tabs pro?

Thanks Whitfield.

yeah me too @AdieJAM, but you’ll see shortly why my time for these has been so limited. :wink:

This can be done using the standard version Tab Anything! No pro required. The different is that you can make links from any element in Blocs. For instance, the links can be your actual navigation links or anything really. PRO can also load content from other Blocs pages when you click the tab. It also can pre-load that content when your visitor hits the page for nice performance.

There are 2 demos on this page that illustrate these points…

Stay tuned though definitely more learning materials headed this way.

1 Like

Brilliant @Whittfield and so much. When you did your live seminar a while back, I stuck it till the end as was just pure brilliant - love how you go in depth and explain the whole procedure and pure passion you have for your work…was really good and hope you do this again.

WOW! now thats a teaser if there ever was one !..can not wait !!!

Thanks for the demo post too (I will get Pro when i need it)

Have you been able to achieve this?

1 Like