在 Foundation Reveal 中打开时，BX 滑块不显示？

问题描述 投票：0回答：2

基本上，我有一个 BX 滑块，它将通过 Zurb 基金会的揭示显示在弹出窗口中。但是，当我单击按钮来显示模式（其中包含 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/

jquery slider zurb-foundation bxslider
2个回答
2
投票

显示模式对话框后，需要实例化

Bx-slider
。

当前您正在 

bx-slider
上实例化 
document.ready()
，但由于模式对话框被隐藏，因此它正在被破坏。因此，当再次显示模式对话框时，
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;
 }

工作演示@ JSFiddle

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

  • 始终将所有 jQuery 相关代码放在 
    document.ready()
    内，这样在页面完全加载到屏幕上之前，您就不会感到任何意外。
  • 在初始加载期间隐藏页面上的元素/图像时，使用 CSS 比使用 JS/jQuery 代码更好，因为您会看到图像在屏幕上出现然后消失。
1
投票

认为这与模态最初被隐藏有关。

你是对的。加载期间的计时至关重要，对于 bxSlider 来说更是如此，因为它在 DOM 准备好之前就进行了计算（观察结果，不确定，但这可以解释为什么 bxSlider 有时可能会得到部分高度）。虽然 bxSlider seems 被实例化为尚存在的模态而被破坏，但它确实存在，但它的计算是基于它的当前内容，在 DOMReady 时该内容为 null...未定义...0？无论当时是什么，我们都同意这不是我们所期望的。

仅使用 bxSlider API 和 JavaScript/jQuery，我们可以通过 3 种可能的方法来纠正此问题：

  1. 有一种记录很少的方法，称为 
    .redrawSlider()
    。此方法有一个特定的用例，即当 bxSlider 隐藏时，
    redrawSlider()
    方法将在 bxSlider 取消隐藏后重绘。此方法将调整视口的大小，从而触发回流（这是我们大多数时候所需要的），但从该回流中，它会计算高度并忽略宽度。只要内容不是块元素就可以。也许这个方法可以在版本 5 或更高版本中工作，但修复了高度错误。
  2. 引起回流，从而强制 bxSlider 重新计算视口。在这种情况下需要引导回流，因为 bxSlider 不会在每次回流时重新计算所有内容。更改 
    .bx-viewport
    和/或 
    .bx-wrapper
    的高度通常有效。如果没有，我们可以使用回调
    onSliderResize
    。
  3. 当 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()
方法动态更改选项的演示。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.