slick js внутри bootstrab nav-tab

Question

описание проблемы сначала. У меня есть nav-tab и 3 вкладки. первый портфель, вторая рекомендация и третья статистика. в рекомендации tab-panes Я хочу поставить slick.js , но когда я запустил и переключился с портфеля на рекомендацию. мой слайдер не показывал изображения, только кнопка slick-prev и slick-next. , как только я проверю элемент проверки, изображение появится.

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 
      } 
     } 
     ] 
    }); 

почему я должен осмотреть первый, так что изображение будет отображаться? Я что-то пропустил.

Answer 1

У вас есть ползунок, скрытый при загрузке страницы?

У меня была аналогичная проблема, и это произошло из-за того, что слайдер был в модальном, который был скрыт при загрузке страницы. По существу ширина и высота ползунка были установлены равными 0.

В конце концов я набрал на слайдере, когда был показан модальный вариант, который обновил ползунок и сбросил его размеры.

например.

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