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。
感謝您的幫助。