Bxslider 未出现在选项卡中

Question

我的网站上有手风琴标签，我正尝试在其中使用 bxslider 制作我的幻灯片。问题是当幻灯片打开时，它显示滑块的高度为 0。

我试过使用 bxslider 提供的重新加载函数，但它一直告诉我这不是函数 - 我可能做错了什么。

我也尝试过向视口添加静态高度，但这只会弄乱图像。我创建了一个 JSFiddle

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

    $('#accordion').find('.accordion-toggle').click(function (){
        $(this).parent().toggleClass('active');
        //Hide the other panels
        $('#accordion section').not($(this).parent()).removeClass('active');
    });
});

注意：我手动将 bxslider 的脚本和 CSS 复制粘贴到 JSFiddle 中，因为我无法弄清楚如何在不这样做的情况下添加它们。我的脚本可以在 bxslider 脚本下面找到

Answer 1

据此comment,

the bxSlider interface is only available on jQuery selectors that match a single element

利用他的 example，我想出了这个解决方案。

$(function() {
  var bxConfig = {
    auto: 'true',
    pager: 'false'
  };

  // cache elements that we will be re-using
  var $accordion = $('#accordion'), 
      $sections = $accordion.find('section'),
      $sliders = [];

  // initialize sliders
  $('.bxslider').each(function (i) {
      $sliders[i] = $(this).bxSlider(bxConfig);
  });

  $accordion.find('.accordion-toggle').on('click', function() {
    var $current = $(this).closest('section');  
    // close other sections
    $sections.not($current).removeClass('active');
    // toggle current section
    $current.toggleClass('active');
    // check if section is active
    if ($current.hasClass('active')) {
      // get the position of the current section among his siblings
      var index = $sections.index($current);
      // reload slider at the given position
      $sliders[index].reloadSlider();
    }
  });
});

这是一个 demo 我缩小了图片只是为了更容易看。

我正在使用该部分的索引来确定要重新加载哪个滑块。因此，如果您在每个部分中有 2 个或更多滑块，或者如果不是所有部分都有滑块，则此解决方案将不起作用。另一种方法是遍历所有滑块并在您打开一个部分时重新加载它们——但这是浪费。

Answer 2

此问题已通过 redrawSlider() method. It is specifically for when bxSlider is unhidden. It requires a repaint. This is only documented here 解决。不幸的是，它的用法似乎不准确，所以我想出了一些实际效果很好的东西。

我在每个 .accordion-toggle 中放置了锚点，并在锚点上委托了一个点击事件。最初，我试图将该方法放在手风琴的功能中，但它不起作用。 redrawSlider() 一开始没有用，经过一番研究后我什么也没发现...所以我猜一定是时机问题，BINGO！

顺便说一句，我知道它没有记录，但如果您有多个滑块，则每个滑块都必须唯一引用。因此，即使您的滑块共享一个公共 class，也可以为每个滑块添加一个唯一的 class 或者一个 id 也不错。每个滑块都应该有自己的设置，即使它们是相同的。

此外，布尔值不是字符串，有时 JavaScript 自动类型转换并不总能捕捉到它。所以在使用 true 和 false 值时要小心，让它们 不加引号 。如果引用，它在技术上是一个字符串。

$('a.trig1').on('click', function(e) {
    e.preventDefault();
    setTimeout(function() {
      bx1.redrawSlider();
    }, 0);
});

$('a.trig2').on('click', function(e) {
    e.preventDefault();
    setTimeout(function() {
      bx2.redrawSlider();
    }, 0);
});

片段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hidden bxSliders</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    #accordion section .accordion-content {
      display: none;
      padding: 0 30px 30px 30px;
    }
    #accordion section.active .accordion-content {
      display: block;
    }
    .bx img {
      margin: 0 auto;
      display: block;
    }
  </style>
</head>

<body>
  <div id="accordion">
    <section>
      <h2 class="accordion-toggle"><a href="#" class="trig1">Test 1</a></h2>
      <div class="accordion-content">
        <p>slider 1</p>
        <ul class="bxslider1 bx">
          <li>
            <img src="http://ichef.bbci.co.uk/images/ic/640x360/p02scs5q.jpg">
          </li>
          <li>
            <img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/EhSddnV/black-and-white-tunnel-effect-turning-left-zoomed-video-background-for-a-transition-or-luma-key-spinning-left-tunnel-effect-zoomed-tunnel-hole-visual-effect_41rgnb8w__M0000.jpg">
          </li>
          <li>
            <img src="https://i.vimeocdn.com/video/541094548_640x360.jpg">
          </li>
        </ul>
      </div>
    </section>
    <section>
      <h2 class="accordion-toggle"><a href="#" class="trig2">Test 2</a></h2>
      <div class="accordion-content">
        <p>slider 2</p>
        <ul class="bxslider2 bx">
          <li>
            <img src="http://cache1.asset-cache.net/xd/513331420.jpg?v=1&c=IWSAsset&k=2&d=2DF30557A92EF68A79FB2FAE5DFF30DA4E7679DD01108BC64BBAD824103B0C3B9D10438B022685F4">
          </li>
          <li>
            <img src="http://www.rantsports.com/clubhouse/files/2015/03/Arianny-Celeste-7.jpg">
          </li>
          <li>
            <img src="http://breakingenergy.com/wp-content/uploads/sites/2/2013/04/72410727.jpg">
          </li>
        </ul>
      </div>
    </section>
  </div>
  <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.3/jquery.bxslider.min.js"></script>

  <script>
    var bx1 = $('.bxslider1').bxSlider({
      auto: true,
      pause: 2000,
      autoHover: true,
      pager: false
    });

    var bx2 = $('.bxslider2').bxSlider({
      auto: true,
      pause: 2000,
      autoHover: true,
      pager: false
    });

    $('a.trig1').on('click', function(e) {
      e.preventDefault();
      setTimeout(function() {
        bx1.redrawSlider();
      }, 0);
    });

    $('a.trig2').on('click', function(e) {
      e.preventDefault();
      setTimeout(function() {
        bx2.redrawSlider();
      }, 0);
    });


    $('.accordion-toggle').click(function(e) {
      e.preventDefault();
      $(this).parent().toggleClass('active');
      $('#accordion section').not($(this).parent()).removeClass('active');
    });
  </script>
</body>

</html>

Bxslider 未出现在选项卡中

Bxslider not appearing in tab

jquery

css

bxslider

片段