slick js inside bootstrab nav-tab

Question

let me description the problem first. i have nav-tab and 3 tab-panes. first portfolio, second recommendation and third statistic. in tab-panes recommendation i want to put a slick.js but when i run, and switch tab from portfolio to recommendation. my slider didnt show any image, only button slick-prev and slick-next. as soon as i check from inspect-element, the image show up.

html

<div id="tabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs responsive-tabs capital bold text-center m-b-25">
                  <li class="active "><a href="#portfolio" role="tab" data-toggle="tab">portfolio</a></li>
                  <li class=""><a href="#recomendation" role="tab" data-toggle="tab">recomendation</a></li>
                  <li class=""><a href="#statistic" role="tab" data-toggle="tab">statistic</a></li>
                </ul>
<div class="tab-content">
                  <div class="tab-pane fade in active" id="portfolio">
<p> bla bla bla</p>
</div>

<div class="tab-pane fade in" id="recomendation">
                    <h4 class="bold capital">reviews <span style="font-weight: normal;color: #c2c2c2;">(5)</span></h4>
                    <p class="capital bold">Review from older company</p>
                    <div class="col-lg-12">
                      <div class="review-company">
                        <div><img src="img/profile.png" alt=""></div>
                        <div><img src="img/profile.png" alt=""></div>
                        <div><img src="img/profile.png" alt=""></div>
                        <div><img src="img/profile.png" alt=""></div>
                        <div><img src="img/profile.png" alt=""></div>
                      </div><!-- Review-company -->
                    </div>
</div>
<div class="tab-pane fade in" id="statistic">
                    <h4>cla cal</h4>
</div>
</div>
</div>  

$('.review-company').slick({
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 3,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
          }
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
          }
        }
      ]
    });

why i have to inspect first, so the image will show up? am i missing something.

Answer 1

Do you have the slider hidden on page load?

I had a similar problem and it was due to the slider being in a modal that was hidden on page load. Essentially the slider width and height were set to 0.

I ended up calling setPositionon the slider when the modal was shown which refreshed the slider and reset its dimensions.

e.g.

$('.review-company').slick('setPosition');