Slider doesn't work correctly in Tab component

Design help Layout & Design
1

Hi all!

I am having a problem with one of my client’s project.

On preview and on the live site the slider is buggy. The first works perfectly but when you change a tab, the slider breaks as you can see.

I have no idea what the problem is, any help would be appreciated:)

Thanks:)

https://preview.webflow.com/preview/flawless-553c49-c3e97ce5f3432c3c69da1d8?utm_medium=preview_link&utm_source=designer&utm_content=flawless-553c49-c3e97ce5f3432c3c69da1d8&preview=0f606229de4ab23dccff037fe088c092&pageId=62ce5e5165cc6059ce77ab70&workflow=preview

Képernyőfotó 2022-08-16 - 13.07.43
Képernyőfotó 2022-08-16 - 13.07.433096×1862 218 KB

2

hello,

Hi,

Maybee you should not use the tab component but create buttons that hide show the differents sliders This way you will have more control on the elements.

As Tab is a Webflow element on witch you don’t have full control, in this kind of situation I prefert to use element on witch I have full anderstanding of the behavior.

1 Like
3

Yes, that was my first tought but that’s harder to edit for a non-technical person who does not really understand how webflow works. The goal is an easy to manage website where the client can just go and text or another tab or slide.

Thanks

4

If you set the hide/show states of the slider in the anim, the client will see the sliders in the Designer. All of them will stack, so he can edit, and maybee he will be able to edit in the editor ( test it) after that, on first click the buttons hide all the base class (ed “sliders”) of the sliders and show only the targeted combo class of the slider (eg “slider-one”).

And you remain in control

1 Like
5

I see that you were able to resolve the issue, I am having the same issue. Can you share you solution?

6

I am facing the same issue. Does somebody know a solution without building a custom tab component?

7

I have found a solution.
I don’t know why, but the slider doesn’t work when it is in a grid or when the parent element uses flexbox.
My layout in the tab panel has two columns. I built them with floats instead of display grid or flexbox and now it works.

1 Like
8

wow, thank you, Mirko.
it works — nesting sliders inside columns inside tabs.
honestly — shame to webflow for such a bug, but mostly for not bringing the solution and taking part in this discussion

1 Like
9

I was having the same issue, that when I had diferent amount of images in each tab the spacing for the tabs that arent initially active wouldn’t align properly. I fixed it with this bit of javascript on the custom code header:

<script>
  // This is for the image sliders to work and align correctly within the tabs element
  var Webflow = Webflow || [];
  Webflow.push(function () {
    $('.w-tab-link').on('click', function () {
      // Run it once shortly after tab becomes visible
      setTimeout(function () {
        Webflow.require('slider').ready();
      }, 100);

      // Run it again just a bit later to fix layout
      setTimeout(function () {
        Webflow.require('slider').ready();
      }, 300);
    });
  });
</script>