在bootstrab nav-tab中使用精巧的js
在bootstrab nav-tab中使用精巧的js
提问于 2016-03-10 18:38:27
让我先描述一下这个问题。我有导航标签和3个标签窗格。第一个投资组合，第二个推荐和第三个统计数据。在标签窗格的建议，我想把一个slick.js，但当我运行，并切换标签从投资组合到建议。我的滑块没有显示任何图像，只有按钮slick-prev和slick-next。我一检查inspect-element，图像就出现了。
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
}
}
]
});为什么我必须先检查，这样图像才会显示出来？我是不是错过了什么。
回答 1
Stack Overflow用户
发布于 2016-03-10 18:56:24
你是否在页面加载时隐藏了滑块？
我也遇到过类似的问题，这是由于滑块处于隐藏在页面加载中的模式。实际上，滑块的宽度和高度都设置为0。
当显示模式时，我最终在滑块上调用了setPosition，它刷新了滑块并重置了它的尺寸。
例如：
$('.review-company').slick('setPosition');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35914066
复制相关文章
相似问题
腾讯云开发者
