BX-Slider可通过“读取更多”按钮调整自适应高度

时间：2016-07-19 14:23:27

标签： javascript jquery bxslider

我正在使用bx-slider。我的任务是为其中一张幻灯片添加“阅读更多”按钮，这样可以扩展幻灯片的高度。问题是当我运行readmore.js函数时，BX滑块不会重新计算高度。有没有办法在我点击其他插件的“Read More”功能的同时调用自适应高度函数？

谢谢

$(document).ready(function() {
  $('.bxslider').bxSlider({

    adaptiveHeight: true,
    pagerCustom: '#bx-pager'

  });
});


$('.readmore').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>



<ul class="bxslider">

  <li>
    <div class="readmore">
      
    <h3>Slide with "Read More" Button. </h3>  
      <p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not adjust.</p>

      <p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
    </div>

  </li>

  <li>
<h3>Other Slide</h3>
    <p>
      Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
      pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
      dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
    </p>
  </li>
</ul>

1 个答案:

答案 0 :(得分：1)

使用

bxSlider API - onSliderResize回调

Readmore API - afterToggle回调

bxSlider可以对间接调整其尺寸的事件无响应。您可以通过直接调整.bx-viewport的大小来“唤醒”它。

  function bxAdjust(idx) {
     $('.bx-viewport').height("0").height('100%');
  }

使用该简单函数作为onSliderResize和afterToggle的回调。下面的工作片段。

段

$(document).ready(function() {
  var bx = $('.bxslider').bxSlider({
    adaptiveHeight: true,
    pagerCustom: '#bx-pager',
    onSliderResize: bxAdjust
  });
});

function bxAdjust(idx) {
  $('.bx-viewport').height("0").height('100%');
}
$('.readmore').readmore({
  afterToggle: rmAdjust
});

function rmAdjust(tgr, ele, exp) {
  bxAdjust();
  if (exp) {
    tgr = 'Close';
  } else {
    tgr = 'Read More';
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>



<ul class="bxslider">

  <li>
    <div class="readmore">
      <h3>Slide with "Read More" Button. </h3> 
      <p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not
        adjust.
      </p>

      <p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem
        vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis,
        neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur
        nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
    </div>

  </li>

  <li>
    <h3>Other Slide</h3>
    <p>
      Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
      pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
      dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
    </p>
  </li>
</ul>

相关问题
最新问题