在 Foundation reveal 中打开时 BX Slider 不显示？

Question

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

模态触发按钮：

<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需要实例化，显示模态对话框后。

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

JS代码：

$(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() 中，这样您的页面在屏幕上完全加载之前就不会出现任何意外。
在初始加载期间在页面上隐藏 elements/images 时，使用 css 比使用 js/jquery 代码更好，因为您会看到图像在屏幕上出现然后消失。

Answer 2

Think it has something to do with the modal being hidden initially.

你是对的。加载期间的时间是至关重要的，对于 bxSlider 来说更是如此，因为它在 DOM 甚至准备好之前进行计算（观察，不确定，但这可以解释为什么 bxSlider 有时可能会以部分高度结束).虽然 bxSlider 似乎被销毁已经被实例化为一个还存在的模态，但它在那里但它的计算是基于它的当前内容，在 DOM 就绪时是空...未定义...0？不管当时是什么，我们都同意这不是我们所期望的。

仅使用 bxSlider API 和 JavaScript/jQuery 有 3 种可能的方法可以解决这个问题：

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

以下代码段使用第三个选项，在整页模式下查看它并通过调整浏览器大小测试它的响应能力。

片段

<!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>

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

在 Foundation reveal 中打开时 BX Slider 不显示？

BX Slider doesn't show when opened in Foundation reveal?

jquery

slider

bxslider

zurb-foundation