Content of the second tab isn't correct initialized when switching tabs

Question

I installed flickity in multiple 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. Thank you.

// Show the first tab by default
$(document).ready(function(){
 
 $('ul.tabs li').click(function(){
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#"+tab_id).addClass('current');
 })

})

body{
 margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
 line-height: 1.6
}

.container{
 width: 800px;
 margin: 0 auto;
}

ul.tabs{
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul.tabs li{
 background: none;
 color: #222;
 display: inline-block;
 padding: 10px 15px;
 cursor: pointer;
}

ul.tabs li.current{
 background: #ededed;
 color: #222;
}

.tab-content{
 display: none;
 background: #ededed;
 padding: 15px;
}

.tab-content.current{
 display: inherit;
}
/* external css: flickity.css */

.carousel {
    background: #EEE;
}

.carousel-cell {
  width: 100%;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.css" rel="stylesheet"/>
<div class="container">

 <ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Tab One</li>
  <li class="tab-link" data-tab="tab-2">Tab Two</li>
  <li class="tab-link" data-tab="tab-3">Tab Three</li>
  <li class="tab-link" data-tab="tab-4">Tab Four</li>
 </ul>

 <div id="tab-1" class="tab-content current">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-2" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-3" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-4" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>

</div><!-- container -->

The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable ([here's how to create one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). — Rory McCrossan, Apr 04 '19 at 13:14
It's probably because container is not visible, you can init the tab when you switch to it. In one of my projects I've used intersection observer or long pooling but for you case you just need to hook to tab change event. — jcubic, Apr 04 '19 at 13:18

score 1 · Accepted Answer · answered Apr 04 '19 at 13:59

You'll have to initialize Flickity and call resize every time you change tabs. Here is an working example:

// Show the first tab by default
$(document).ready(function(){
 
 $('ul.tabs li').click(function(event){
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#"+tab_id).addClass('current');
      var selector = event.target.getAttribute('data-tab');
  // trigger resize on tab pane
    $( "#" + selector + " .carousel").flickity();
    $( "#" + selector + " .carousel").flickity('resize');

    
   });
})

body{
 margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
 line-height: 1.6
}

.container{
 width: 800px;
 margin: 0 auto;
}

ul.tabs{
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul.tabs li{
 background: none;
 color: #222;
 display: inline-block;
 padding: 10px 15px;
 cursor: pointer;
}

ul.tabs li.current{
 background: #ededed;
 color: #222;
}

.tab-content{
 display: none;
 background: #ededed;
 padding: 15px;
}

.tab-content.current{
 display: inherit;
}
/* external css: flickity.css */

.carousel {
    background: #EEE;
}

.carousel-cell {
  width: 100%;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.css" rel="stylesheet"/>
<div class="container">

 <ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Tab One</li>
  <li class="tab-link" data-tab="tab-2">Tab Two</li>
  <li class="tab-link" data-tab="tab-3">Tab Three</li>
  <li class="tab-link" data-tab="tab-4">Tab Four</li>
 </ul>

 <div id="tab-1" class="tab-content current">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-2" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-3" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-4" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>

</div><!-- container -->

I selected upvote but message is coming like this ("Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score.") Thank you Sir.. — Bunny, Apr 04 '19 at 14:52

Content of the second tab isn't correct initialized when switching tabs

1 Answers1