how to refresh the slider

[ali-hellani]

using the latest version of tns (2.8.2) the viewport of the slider inside display: none block is 0

so how to refresh the slider while switching between tabs or showing a modal ?!

[ganlanyuan]

Hi, I made a demo and it seems work fine with tabs.
I guess there maybe some special cases on your end which prevent it to work.
Would you like to make a demo to show the issue that you encountered?

[ali-hellani]

i have made a pen for my issue using the same plugins i use in my project

[ganlanyuan]

I see.
The problem here with vertical slider is that the children of hidden element has 0 heights.
I will see if there is any way to work around this.

[ganlanyuan]

You can hide the parent using height:0; overflow: hidden instead of display: none to work around this.
To fix this from inside tiny-slider would be much more complicated.

[ali-hellani]

if you mean putting this code to override display: none for parent tabs-panel, it doesn't work

.tabs-panel:not(.is-active) {
  display: block;
  height: 0;
  overflow: hidden;
}

[ali-hellani]

i am still wondering why the plugin doesn't have yet a Refresh or setPosition methods like any other carousel or slider plugin

[ganlanyuan]

Check out my forked demo, it works well

[ganlanyuan]

Method refresh added to tns in this commit, you can use it in this way:

tab.addEventListener('click', function(e){
  container.show(); // make the slider visible
  sliders[i].refresh(); // refresh the slider
});

[ali-hellani]

Thanks, both solutions (css and js refresh) worked but for js refresh method i had to disable the transition-duration for.tns-innerto make it refreshes smoothly without notice.

For now, i will stick with css workaround until next release (with refresh method)

[ganlanyuan]

New version v2.8.3 was published