title: slider inside tabs, need to set slick position when toggle in
body: <p>I have jquery slick slider inside tabs and the slider wont calculate the layout until the tab is active.</p>
  
  <p>Here is the current slick code.</p>
  
  <pre><code>// JavaScript Document
  
  
  jQuery(document).on('ready', function() {
  
  
    jQuery(".slider").slick({ asNavFor: '.slider',
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [
           {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      },
    ]
  
    });
   jQuery(document).bind('DOMSubtreeModified', function () {
          $('.panel-collapse first-toggle collapse in').get(0).slick.setPosition();         
    });
  }); 
  </code></pre>
  
  <p>and here is the html output page <a href="http://demo.armentum.co/thatsinsurance/compare-travel-insurance-fav/?cn=4079%2C4098%2C3863%2C3869" rel="nofollow noreferrer">my html output page</a></p>
  
  <p>If you click on the tab labelled Optional Cover, the slick is squashed over on one side. </p>
  
  <p>I looked on Ken Wheelers reddit for the slider and his comments were</p>
  
  <blockquote>
    <p>This is because when a carousel is hidden, slick can't properly calculate its dimensions.</p>
    
    <p>An easy way to fix is to go into your bootstrap css and use
    max-height: 0px and max-height: auto instead of display: none and
    display: block.</p>
    
    <p>Another way, is when a tab is shown, call
    $('.the-carousel-thats-getting-shown').get(0).slick.setPosition()</p>
  </blockquote>
  
  <p>I tried changing the css outside of bootstrap with !important for the class but max-height:auto is coming up invalid markup and it didnt fix it anyway.</p>