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

使用redrawSlider()方法解决了此问题。它特别适用于取消隐藏bxSlider的情况。它需要重画。这只是记录here。不幸的是，它的使用似乎不准确，所以我提出了一些实际上非常有用的东西。

我在每个.accordion-toggle中放置了锚点，并在锚点上委派了一个click事件。最初，我试图将方法放在手风琴的功能中，但它没有用。 redrawSlider()一开始没有工作，经过一些研究后我什么都没找到......所以我猜想它一定是时机， BINGO！

顺便说一句，我知道它没有记录，但是如果你有多个滑块，每个滑块必须唯一引用。因此，即使您的滑块共享一个公共类，也为每个类添加一个唯一的类，或者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>

Answer 2

根据此comment，

bxSlider接口仅适用于匹配a的jQuery选择器单个元素

使用他的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个或更多滑块，或者如果不是所有部分都有滑块，则此解决方案将不起作用。另一种方法是循环浏览所有滑块并在打开某个部分时重新加载它们 - 但这很浪费。

Bxslider未显示在标签

2 个答案:

段