1
我将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是一个默认的JavaScript网址下载F- rom github。
感谢您的帮助。