Question

基本上，我有一个BX Slider，它将通过Zurb Foundation的揭示弹出窗口。但是，当我单击按钮以显示模态（其中包含bx滑块）时，它不会显示。奇怪的是，当我调整窗口大小时，旋转木马突然出现。

模态触发按钮：

<a class="button" data-open="modal-product-detail">Show Modal</a>

模态HTML：

<div class="reveal" id="modal-product-detail" data-reveal>

              <ul class="bxslider">
                <li class="">

                    <img src="images/img_product_popup_detail.jpg">

                </li>
                <li class="">

                    <img src="images/img_product_popup_detail.jpg">

                </li>
                <li class="">

                    <img src="images/img_product_popup_detail.jpg">

                </li>
              </ul>

              <button class="reveal-close" data-close aria-label="Close modal" type="button">
              </button>

JS代码：

$(document).ready(function(){

  $('.bxslider').bxSlider({
    auto: false,
    controls: true,
    pager: false
  });

});

以下是问题的模拟：

认为它与最初隐藏的模态有关。

https://jsfiddle.net/5s6nowaq/

Answer 1

在显示模态对话框后，需要实例化Bx-slider。

目前您在bx-slider上实例化document.ready()，但由于隐藏了模态对话框，因此它将被销毁。因此，当再次显示模态对话框时，屏幕上不会显示bx-slider。

JS CODE：

$(document).ready(function() {
   //$(".modal1").hide();

   $(".sampleclick").on('click', function() {
     $(".modal1").show();
     $('.bxslider').bxSlider({
        auto: true,
        controls: false,
        pager: false
     });
    });
  });

CSS代码：

.modal1 {
   display: none;
 }

Working Demo @ JSFiddle

我在您的代码中进行了其他一些更改 注意：的

始终将所有与jquery相关的代码放在document.ready()中，以便在页面完全加载到屏幕上之前不会有任何意外。
在初始加载期间在页面上隐藏元素/图像时，最好使用css而不是使用js / jquery代码，因为您会看到图像出现然后在屏幕上消失。

Answer 2

认为它与最初隐藏的模态有关。

你是对的。在加载过程中的时间安排是至关重要的，并且它更适合bxSlider，因为它在DOM准备好之前进行了计算（观察，不确定，但这可以解释为什么bxSlider可能最终有时是部分高度）。虽然bxSlider 似乎被破坏并且已经被实例化为一个尚未存在的模态，但是它存在，但是它的计算是基于它在DOMReady时的当前内容。空... ...未定义0？无论当时是什么，我们都同意这不是我们所期望的。

只使用bxSlider API和JavaScript / jQuery，我们可以通过3种方法来解决这个问题：

有一个名为.redrawSlider()的文档记录欠佳的方法。此方法有一个特定的用例，关于何时隐藏bxSlider，redrawSlider()方法将在取消隐藏bxSlider后重绘。此方法将调整触发回流的视口大小（这是我们大多数时间都需要的），但是从该回流中，它会计算高度并忽略宽度。只要内容不是块元素，这就没问题。也许这种方法可以在版本5或更好的版本中修复高度错误。
导致重排，从而迫使bxSlider重新计算视口。在这种情况下需要引导回流，因为bxSlider不会在每次回流时重新计算所有内容。更改.bx-viewport和/或.bx-wrapper的高度通常有效。如果没有，我们可以使用回调onSliderResize。
当bxSlider从display:none状态出现到display:{ANYTHING OTHER THAN NONE}时，我们可以重新实例化bxSlider，就像@dreamweiver所建议的那样。 bxSlider API有一个方法.reloadSlider()，你猜对它重新加载bxSlider。

以下代码段使用第3个选项，在“整页”模式下查看，并通过调整浏览器大小来测试其响应性。

<强>段

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>00A00</title>
  <link href='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      background: #111;
      color: #eee;
      font: 400 16px/1.428 Verdana;
    }
    main {
      padding: 4em;
    }
    .bx-wrapper {
      background: none;
    }
    img {
      margin: 0 auto;
      display: block;
    }
    section.off {
      display: none;
    }
    section.on {
      display: block;
    }
    button {
      display: inline-block;
      border-radius: 4px;
      border: 1px solid cyan;
      line-height: 1.2;
      font-size: 1.25rem;
    }
    button.off {
      color: cyan;
      background: none;
    }
    button.off::before {
      content: 'Reveal ';
    }
    button.on {
      color: black;
      background: cyan;
    }
    button.on::before {
      content: 'Conceal ';
    }
  </style>
</head>

<body>
  <main>
    <button id="btn1" class="off">BX</button>

    <section id='sec1' class="off">

      <ul class="bxslider">
        <li class='slide'>
          <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
        </li>
        <li class='slide'>
          <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
        </li>
        <li class='slide'>
          <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
        </li>
        <li class='slide'>
          <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
        </li>
        <li class='slide'>
          <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
        </li>
      </ul>

    </section>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>
  <script>
    $(function() {
      var bx = $('.bxslider').bxSlider({
        pager: false
      });

      /*  This part is optional...
      |...If you want to change your...
      |...options during reload...
      |
      */ // 1. Create an object literal
      /*ex: var cfg = {pager:false};
       */
      //// 2. Pass this object:
      /*ex: bx.reloadSlider(cfg)
       */
      // Follow the directions with 

      /* Add a '/' to the beginning of this line
      var cfg = {
        mode: 'vertical',
        maxSlides: 2,
        minSlides: 2,
        shrinkItems: true,
        pager:false
      };
      //*/

      $('#btn1').on('click', function() {
        $(this).toggleClass('on off');
        $('#sec1').toggleClass('on off');
        /* Add a '/' at strat of line
        bx.reloadSlider(cfg);
        //*/
        //* Remove the first '/' of line
        bx.reloadSlider();
        //*/
      });
    });
  </script>
</body>

</html>

＆＃13;

作为奖励，我添加了一个演示如何使用.reloadSlider()方法动态更改选项。

BX Slider在基金会揭晓时不显示？

2 个答案: