![](/img/trans.png)
[英]promise function working in Chrome and Firefox but not in IE Edge and IE11
[英]Bxslider not working in Firefox and IE11
因此,滑塊應顯示5張幻燈片,並根據視口大小向下響應至1張。 在Chrome / Opera中,這似乎可行,但在Firefox和IE11中,僅顯示1張幻燈片。 有任何想法嗎?
我的滑塊位於此處: http : //www.peaceloveanddecorating.com/store/pg/537-Lenny-Eva-Style-Guide.html
這是代碼:
<div>
<ul class="bxslider" style="text-align: center; ">
<li><img src="/images/brands/lenny-eva/lenny-eva-wide-cuffs-cat.jpg"><span class="le-slider-text">Test 1</span></li>
<li><img src="/images/brands/lenny-eva/large-sentiments-cat.jpg"><span class="le-slider-text">Test 2</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-thin-cuff-cat.jpg"><span class="le-slider-text">Test 3</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-pendants-cat.jpg"><span class="le-slider-text">Test 4</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-beaded-cat.jpg"><span class="le-slider-text">Test 5</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-wraps-cat.jpg"><span class="le-slider-text">Test 6</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-flourish-cat.jpg"><span class="le-slider-text">Test 7</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-mini-charms-cat.jpg"><span class="le-slider-text">Test 8</span></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<script>
$('.bxslider').bxSlider({
maxSlides: 5,
slideWidth: 200,
slideMargin: 10
});
</script>
這是在頭上:
<script src="/Shared/Themes/Base/js/jquery.bxslider.min.js">
<link rel="stylesheet" href="/Shared/Themes/Base/CSS/jquery.bxslider.css">
正如@IndieRok在評論中指出的那樣,我兩次初始化bxSlider,這導致了問題。 將代碼更改為以下示例可修復該問題。
<div>
<ul class="bxslider" style="text-align: center; ">
<li><img src="/images/brands/lenny-eva/lenny-eva-wide-cuffs-cat.jpg"><span class="le-slider-text">Test 1</span></li>
<li><img src="/images/brands/lenny-eva/large-sentiments-cat.jpg"><span class="le-slider-text">Test 2</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-thin-cuff-cat.jpg"><span class="le-slider-text">Test 3</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-pendants-cat.jpg"><span class="le-slider-text">Test 4</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-beaded-cat.jpg"><span class="le-slider-text">Test 5</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-wraps-cat.jpg"><span class="le-slider-text">Test 6</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-flourish-cat.jpg"><span class="le-slider-text">Test 7</span></li>
<li><img src="/images/brands/lenny-eva/lenny-eva-mini-charms-cat.jpg"><span class="le-slider-text">Test 8</span></li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
maxSlides: 5,
slideWidth: 200,
slideMargin: 10
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.