javascript - Bxslider 在 Firefox 和 IE11 中不工作

Question

因此 slider 应该显示 5 张幻灯片并根据视口(viewport)大小响应减少到 1 张。在 Chrome/Opera 中，这似乎有效，但在 Firefox 和 IE11 中，它只显示 1 张幻灯片。有什么想法吗？

我的 slider 在这里: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">

Answer 1

正如@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
   });
});