我使用Slick-Slider作为响应式网站的一部分。问题是当您调整浏览器大小时，滑块中的内容面板不会滑动并卡住。
如果您将浏览器的大小调整为手机大小并滑动到幻灯片5.然后将浏览器的大小调整为全宽。
您将看到无法再看到幻灯片1到4，第一个滑块将在幻灯片5上显示。
HTML文件代码：
<div class="container-fluid">
<h1 class="text-danger">Recommended For You / Latest Offer</h1>
<div id="ig-offer" class="row">
<div id="ig-offer-6-latest" class="slider responsive">
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Account</div>
<img src="../../images/game/assassin.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Player of the Month: Messi</h5></div>
<div class="offer-desc text-muted small">
FIFA 15
<br />
Xbox ONE
</div>
<h4 class="txt-1line"><b>RM 103.90</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-cur">Currency</div>
<img src="../../images/game/ff-tactics.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">5,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.000703
<br />
Aegwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 23.90</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-itm">Item</div>
<img src="../../images/game/harvest-moon.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 486.56</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-bss">Boosting</div>
<img src="../../images/game/hero.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">10,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.000703
<br />
Aegwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 48.50</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-crd">Card</div>
<img src="../../images/game/lol.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
World of Warcraft
<br />
Firetree - Horde
</div>
<h4 class="txt-1line"><b>RM 263.10</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-cur">Currency</div>
<img src="../../images/game/reckoning.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Something of Something: Epicness</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 82.50</b></h4>
</div>
</div>
</div>
</div>
</div>
</div>
index.js：
jQuery("div[id^='ig-offer-6-']").slick({
dots: false,
infinite: true,
speed: 250,
slidesToShow: 6,
slidesToScroll: 1,
prevArrow: '<a class="slick-prev slick-nav slick-left" role="button" data-role="none"><span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span></a>',
nextArrow: '<a class="slick-next slick-nav slick-right" role="button" data-role="none"><span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span></a>',
responsive: [
{breakpoint: 1024, settings: {slidesToShow: 3}},
{breakpoint: 600, settings: {slidesToShow: 2}},
{breakpoint: 480, settings: {slidesToShow: 1}}
]
});
slick.js是github的默认javascript下载。
感谢您的帮助。
答案 0 :(得分：0)
下面的脚本然后可以解决问题。
<script>
var $slider = $('#your-element'); // my slider
$(window).resize(function() {
$slider.slick('slickGoTo', 0);
});
</script>
Ps *这仅适用于没有动画的滑块。