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

Question

In my WordPress based on Bootstrap v.4.3 framework, I have an image based carousal and a solid-color layer div on top of it. I want the solid-color layer to fade-out and reveal the beneath carousal image for each carousel-item, example in this theme (https://themes.muffingroup.com/be/architect5/?utm_source=demos).

Below the 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>

Below the CSS for positioning the .slide-layer-row row div, which is solid-color layer on top of 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;
}

I have aligned the .slide-layer to animate the fadeout using jQuery on the carousal events with below code:

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

The slide-to-left and fadeOut is not happening.
Here is the JSFiddle (https://jsfiddle.net/kingBethal/s1g56bf0/8/).
Help me out.

Answer 1

In my case i am using bootstrap carousels active class and pseudo element to to give the grey 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>

Answer 2

What I did was place two divs inside slide-layer-row (one for each background color) and move the whole thing over to reveal the next slide. Then reset its position before the next slide. This way, you don't need to watch for the slid-bs-carousel event.

https://jsfiddle.net/rgy64uwm/

And if you want that soft quick fade in of the solid block, you can do that with a handful of nested callbacks.

https://jsfiddle.net/8eqkua9s/

---

Edit: Added snippet. In this version, the box sizes are dynamically set to match the first image.

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>