[英]Bxslider not working in Firefox and IE11
So the slider should be displaying 5 slides and responding down to 1 based on viewport size. 因此,滑块应显示5张幻灯片,并根据视口大小向下响应至1张。 In Chrome/Opera, this seems to be working, but in Firefox and IE11, it only shows 1 slide.
在Chrome / Opera中,这似乎可行,但在Firefox和IE11中,仅显示1张幻灯片。 Any ideas?
有任何想法吗?
My slider is live here: http://www.peaceloveanddecorating.com/store/pg/537-Lenny-Eva-Style-Guide.html 我的滑块位于此处: http : //www.peaceloveanddecorating.com/store/pg/537-Lenny-Eva-Style-Guide.html
Here is the code: 这是代码:
<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>
This is in the head: 这是在头上:
<script src="/Shared/Themes/Base/js/jquery.bxslider.min.js">
<link rel="stylesheet" href="/Shared/Themes/Base/CSS/jquery.bxslider.css">
As @IndieRok pointed out in the comments, I was initializing bxSlider twice, which was causing the problems. 正如@IndieRok在评论中指出的那样,我两次初始化bxSlider,这导致了问题。 Changing the code to the example below fixed it.
将代码更改为以下示例可修复该问题。
<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.