jquery - 设为绝对:position div slide to left and fadeout - Bootstrap on WordPress

Question

在我的基于 Bootstrap v.4.3 框架的 WordPress 中，我有一个基于图像的轮播和一个纯色层 div 在其顶部。我希望纯色图层淡出并显示每个轮播元素下面的轮播图像，例如本主题 ( https://themes.muffingroup.com/be/architect5/?utm_source=demos )。

在 HTML 下方:

<div class="container-fluid home-slide no-gutters" id="home-slide">
    <!-- IMAGES ROW -->
    <div class="row slide-images-row">
        <div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="/img/one.png" class="img-responsive d-block"/>
                </div>
                <div class="carousel-item">
                    <img src="/img/two.png" class="img-responsive d-block"/>
                </div>
            </div>
        </div>
    </div>

    <!-- SOLID LAYER ROW -->
    <div class="row slide-layer-row">
        <div class="slide-layer"></div>
    </div>
</div>

位于CSS下方，用于定位.slide-layer-row行div，它是轮播顶部的纯色层:

.home-slide {
    position: relative;
}
.slide-layer-row {
    background-color: #ccc;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    margin: 0;
    bottom: 0;
    right: 0;
}

我已经对齐了.slide-layer，以便使用 jQuery 在轮播事件上使用以下代码来设置淡出动画:

$('#carousel-home').on('slide.bs.carousel', function () {
    $(".slide-layer").css('background-color', '#ccc');
    $(".slide-layer").hide("slide", { direction: "left" }, 1000);
});
$('#carousel-home').on('slid.bs.carousel', function () {
    $(".slide-layer").css('background-color', 'rgba(0,0,0,0.5)');
});

向左滑动和淡出未发生。
这是 JSFiddle ( https://jsfiddle.net/kingBethal/s1g56bf0/8/ )。
帮帮我。

Answer 1

我所做的是将两个 div 放在 slide-layer-row 中(每个背景颜色一个)，然后将整个内容移到上面以显示下一张幻灯片。然后在下一张幻灯片之前重置其位置。这样，您就不需要监视 slid-bs-carousel 事件。

https://jsfiddle.net/rgy64uwm/

如果您想要实心 block 的软快速淡入，您可以通过一些嵌套回调来实现。

https://jsfiddle.net/8eqkua9s/

<小时/>

编辑:添加了代码片段。在此版本中，框大小会动态设置以匹配第一张图像。

var imageWidth = $('.carousel-item.active img').width();
$('.slide-layer-row').css('width', (imageWidth * 3 + 'px'));
$('.slide-layer-out').css('width', imageWidth + 'px');
$('.slide-layer-in').css('width', imageWidth * 2 + 'px');

$('#carousel-home').on('slide.bs.carousel', function() {
  $('.slide-layer-out').animate({
    'opacity': '1'
  }, 300, function() {
    $('.slide-layer-row').animate({
      'left': -imageWidth + 'px',
    }, 1000, function() {
      $('.slide-layer-out').animate({
        'opacity': '0.3'
      }, 100, function() {
        $(".slide-layer-row").css({
          'left': '0',
        })
      })
    });
  })
});

.slide-images-row {
  z-index: 0;
}

.home-slide {
  position: relative;
  overflow-x: hidden;
}

.slide-layer-row {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  margin: 0 !important;
  height: 100%;
}

.slide-layer-out,
.slide-layer-in {
  height: 100%;
  display: inline-block;
  position: relative;
  background-color: rgba(100, 100, 100, 1);
  opacity: 0.3;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>


<div class="container-fluid home-slide no-gutters" id="home-slide">
  <!-- IMAGES ROW -->
  <div class="row slide-images-row">
    <div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img-responsive d-block" />
        </div>
        <div class="carousel-item">
          <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="img-responsive d-block" />
        </div>
      </div>
    </div>
  </div>

  <!-- SOLID LAYER ROW -->
  <div class="row slide-layer-row">
    <div class="slide-layer-out"></div>
    <div class="slide-layer-in"></div>
  </div>
</div>