Bootstrap tab refresh on click

Question

On this project there is Bootstrap tab and Camera image slider. There is two tabs named Video news/ Picture news. And both have their sub tabs. And the subtabs use their own Camera slider. So the problem with this is when i click on subtabs the image sliders are breaking. What i need is to refresh the image slider or reload the slider so could they get their proper width.

So is there any proper way to do this?

Tab.active -> Sub tab -> Slider /on first it's ok/
           -> Sub tab -> Slider /Click on sub tab it breaks/
           -> Sub tab -> Slider
Tab        -> Sub tab -> Slider /all breaks/
           -> Sub tab -> Slider /Click on sub tab it breaks/
           -> Sub tab -> Slider

Answer 1

You have to attach an event to Tabs and render the Camera slider when necessary.

Basically, you insert something like this into your code

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // refresh the slider
})

Remember to change a[data-toggle="tab"] to match your tab links.

You have two events available:

• shown.bs.tab - This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
• shown.bs.tab - This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

As you can see, by accessing active tab (e.releatedTarget) you can simply get the ID of the container where slider you need to refresh lives.

Look at the "Events" section for more