在 WordPress 上向左滑动 absolute:position div 并淡出 - Bootstrap

Question

在我基于 Bootstrap v.4.3 框架的 WordPress 中，我有一个基于图像的 carousal 和一个纯色层 div 在它上面。我希望纯色层淡出并显示每个 carousel-item 下面的旋转图像，例如这个主题 (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，这是 carousal 顶部的纯色层：

.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

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

https://jsfiddle.net/rgy64uwm/

如果您想要实心块的柔和快速淡入，可以使用一些嵌套回调来实现。

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>

Answer 2

在我的例子中，我使用 bootstrap 轮播 active class 和 pseudo 元素来提供灰色 background

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

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

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

.slide-layer-out,
.slide-layer-in {
  width: 50%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.slide-layer-out {
  background-color: #ccc;
}

.slide-layer-in {
  background-color: rgba(0, 0, 0, 0.5);
}

.carousel {
  width:100%;
}

.carousel-item {
}

.carousel-item:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: grey;
  left: 0;
  top: 0;
  opacity: 1;
}

.carousel-item.active:before {
  animation: mymove 2s forwards;
  animation-delay: 1s;
}

@keyframes mymove {
  0% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 0%;
    opacity: 0;
  }
}

<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>
</div>

在 WordPress 上向左滑动 absolute:position div 并淡出 - Bootstrap

Make a absolute:position div slide to left and fadeout - Bootstrap on WordPress

css

wordpress

jquery

carousel

twitter-bootstrap