Question

让我先描述一下这个问题。我有导航标签和3个标签窗格。第一个投资组合，第二个推荐和第三个统计。在tab-panes推荐中我想放一个slick.js 但是当我跑步时，将标签从投资组合切换到推荐。我的滑块没有显示任何图像，只有按钮光滑 - 上一个和光滑 - 下一个。一旦我从inspect-elements检查，图像就会出现。

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.

当显示模式刷新滑块并重置其尺寸时，我最终在滑块上调用setPosition。

e.g。

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

在bootstrab nav-tab中使用slick js

1 个答案: