конфликт MixitUp с nav nav-tabs bootstrap 3

Question

Я хочу использовать Mixitup для портфолио на моей индексной странице. на индексной странице у меня есть «nav nav-tabs» & Элементы Mixitup. когда я нажимаю на вкладку nav, элементы mixitup Скрыть. Такие как конфликт.
как я могу это исправить?

$(document).ready(function(){ 
 
var iast_MainGallery = document.querySelector('#iast-GalleryMainMix'); 
 
var mixer = mixitup(iast_MainGallery, { 
 

 

 

 
    animation: { 
 
     effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation 
 
    }, 
 
    load: { 
 
     filter: 'none' // Ensure all targets start from hidden (i.e. display: none;) 
 
    } 
 
}); 
 

 
iast_MainGallery.classList.add('mixitup-ready'); 
 
mixer.show() 
 
    .then(function() { 
 
     // Remove the stagger effect for any subsequent operations 
 

 
     mixer.configure({ 
 
      animation: { 
 
       effects: 'fade scale' 
 
      } 
 
     }); 
 
    }); 
 

 
    });

<div class="iast-GalleryBtnMixIt"> 
 
         <button class="filter iast-GalleryBtnActive " data-filter="all">all</button> 
 
         <button class="filter" data-filter=".category-1">cat1</button> 
 
         <button class="filter" data-filter=".category-2">cat2</button> 
 
         <button class="filter" data-filter=".category-3">cat3</button> 
 
         <button class="filter" data-filter=".category-4">cat4</button> 
 
         <button class="filter" data-filter=".category-5">cat5</button> 
 
        </div> 
 

 
        <div id="iast-GalleryMainMix" class="container"> 
 

 
         <!-- 1 --> 
 
         <div class="mix iast-MainGalleryMixItems category-1" data-myorder="1" style="display: inline-block;"> 
 
          <div class="iast-GalleryItemUniName"> 
 
           <a href="#"> 
 
            item1 
 
           </a> 
 
          </div> 
 
          <a href="#"> 
 
           <img class="img-responsive" src="assets/demo/img/gallery-thumb.jpg" width="150" height="150"> 
 
          </a> 
 
          <div class="iast-GalleryItemDesc"> 
 
text 
 
          </div> 
 
         </div> 
 
</div>

Answer 1

JS:

mixitup(container, { 
selectors: { 
    control: '[data-mixitup-control]' 
    } 
} 

добавить данных mixitup-контроль на фильтрах:

<button type="button" data-mixitup-control data-filter=".red">Red</button> 
<button type="button" data-mixitup-control data-toggle=".blue">Blue</button> 
<button type="button" data-mixitup-control data-sort="default:desc">Sort Desc</button> 

Solution link