Erstellen Sie ein absolute:position div-Slide nach links und blenden Sie aus – Bootstrap auf WordPress

Question 1

In meinem WordPress, das auf dem Bootstrap v.4.3-Framework basiert, habe ich ein bildbasiertes Karussell und ein einfarbiges Ebenen-Div darüber. Ich möchte, dass die einfarbige Ebene ausgeblendet wird und das darunter liegende Gelagebild für jeden sichtbar wird carousel-itemBeispiel in diesem Thema (https://themes.muffingroup.com/be/architect5/?utm_source=demos).

Unter dem 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="https://stackoverflow.com/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>

Unterhalb des CSS zum Positionieren der .slide-layer-row row div, das eine einfarbige Schicht über dem Karussell ist:

.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;
}

Ich habe die ausgerichtet .slide-layer um das Fadeout mit jQuery für die Karussellereignisse mit dem folgenden Code zu animieren:

$('#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)');
});

Das Schieben nach links und FadeOut findet nicht statt.
Hier ist die JSFiddle (https://jsfiddle.net/kingBethal/s1g56bf0/8/).
Helfen Sie mir.

Question 2

Was ich tat, war, zwei Divs hinein zu legen slide-layer-row (eine für jede Hintergrundfarbe) und bewegen Sie das Ganze hinüber, um die nächste Folie anzuzeigen. Setzen Sie dann seine Position vor der nächsten Folie zurück. Auf diese Weise müssen Sie nicht auf die achten slid-bs-carousel Veranstaltung.

https://jsfiddle.net/rgy64uwm/

Und wenn Sie dieses weiche schnelle Einblenden des soliden Blocks wünschen, können Sie dies mit einer Handvoll verschachtelter Callbacks tun.

https://jsfiddle.net/8eqkua9s/

Bearbeiten: Ausschnitt hinzugefügt. In dieser Version werden die Boxgrößen dynamisch so eingestellt, dass sie mit dem ersten Bild übereinstimmen.

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/[email protected]/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>

Question 3

In meinem Fall verwende ich Bootstrap-Karussells active Klasse und pseudo Element, um das Grau zu geben 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/[email protected]/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>