1

I installed flickity in multiple vanilla js tabs and it is correctly initialized in the first tab. while the content of the first tab is loaded, the content of the second isn't correct initialized.

<div class="outer-wrap">

<ul class="simple-tabs" id="demo-tabs">
    <li class="tab-1 active">tab-1</li>
    <li class="tab-2">tab-2</li>
    <li class="tab-3">tab-3</li>
</ul>
<div class="clear-float"></div>

<div id="tab-1" class="tab-page active-page"><div class="carousel" data-flickity><div class="carousel-cell"></div><div class="carousel-cell"></div><div class="carousel-cell"></div></div></div>

<div id="tab-2" class="tab-page">
   <div class="carousel" data-flickity><div class="carousel-cell"></div><div class="carousel-cell"></div><div class="carousel-cell"></div></div></div>

<div id="tab-3" class="tab-page">
    <div class="carousel" data-flickity><div class="carousel-cell"></div><div class="carousel-cell"></div><div class="carousel-cell"></div></div></div></div>

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script><script>var SimpleTabs = function (elem) {
var activeTabObject;

var TabObject = function () {
    var self = this;
    this.tab; //element
    this.pane; //element
    this.setClick = function () {
        self.tab.addEventListener('click', self.showThisTab)
    };

    this.showThisTab = function () {
        if (self !== activeTabObject) {
            //change the tab page and update the active tab
            activeTabObject.pane.className = activeTabObject.pane.className.replace('active-page', '');
            activeTabObject.tab.className = activeTabObject.tab.className.replace('active', '');
            self.pane.className = self.pane.className + ' active-page';
            self.tab.className = self.tab.className + ' active';
            activeTabObject = self;
        }
    };

};

var ul = elem;
var i;
var items = ul.getElementsByTagName("li");
for (i = 0; i < items.length; ++i) {
    var tab = new TabObject();
    tab.tab = items[i];
    var classString = items[i].className;
    var className = classString.split(' ')[0];
    tab.pane = document.getElementById(className);
    tab.setClick();
    if (classString.indexOf('active') > -1) {
        activeTabObject = tab;
    }  
}
};</script><script>        
    window.onload = function() {
        var demoTabs = new SimpleTabs(document.getElementById('demo-tabs'));
    };
</script>

content of the second isn't correct initialized. codepen : https://codepen.io/himalayanath/pen/xvgyoO Thank You!

Bunny
  • 33
  • 1
  • 10

1 Answers1

0

According to the Flickity document, you should call resize() after switch tabs.

Walker Wei
  • 31
  • 6