jquery - 宽度的继承。 slider

Question

有问题。我的 slider 可能包含不同的图像，其宽度最大可达 1256 像素。幻灯片 - 大约 4 张。 slider 下方有一个 block ，其宽度应等于事件图像的宽度。如何做得更好？

mode: fade

我试过这个:

if ($ ('. carousel. bx-wrapper. item img'). css ('display') == 'block') {
 var widthparent = $ ('. carousel. bx-wrapper. item img'). width ();
 widthparent = widthparent + 'px';
 var child = $ ('. subscribe');
 child.width (widthparent);
}

但是这个解决方案很糟糕。这里的宽度继承自第一张图片。

---

有效:

$('.carousel .list').bxSlider({
 mode: 'fade',

 onSlideBefore: function($slideElement, oldIndex, newIndex) {
  var blockWidth = $slideElement.width();
    $('.subscribe').css('width', blockWidth);
 }
});

但是，在“.carousel” block 中，宽度被确定为“max-width”:“1256px”并且每个 .item = 1256px。

要求宽度取自 img，而不是 .item。

例如，在第二种情况下，“.subscribe”必须等于 1200px。

<div class="carousel">
  <div class="bx-wrapper" style="max-width: 100%;">
    <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 508px;">
      <ul class="list" style="width: auto; position: relative;">

        <li class="item" style="float: none; list-style: none outside none; position: absolute; display: none; width: 1256px; z-index: 0;">
          <a class="link" href="">
            <img alt="" src="media/uploads/slide-1.jpg"> // width = 1000px
          </a>
        </li>

        <li class="item" style="float: none; list-style: none outside none; position: absolute; display: none; width: 1256px; z-index: 0;">
          <a class="link" href="">
            <img alt="" src="media/uploads/slide-2.jpg"> // width = 1200px
          </a>
        </li>

        <li class="item" style="float: none; list-style: none outside none; position: absolute; display: none; width: 1256px; z-index: 0;">
          <a class="link" href="">
            <img alt="" src="media/uploads/slide-3.jpg"> // width = 900px
          </a>
        </li>

        ....

Answer 1

在没有代码示例的情况下，这是我最好的选择。在您的 slider 调用中，有一个名为 onSlideBefore 的函数，它可以帮助您完成您正在尝试执行的操作。

$('.bx').bxSlider({
    onSlideBefore: function($el, old, new) {
        var blockWidth = $el.eq(new).width();
        $('.subscribe').css('width', blockWidth);
    }
});

在没有任何代码可玩的情况下，我不能 100% 确定这一点，但它应该能让您走上正确的轨道。