Image appears after a delay on bootstrap slider

Question

I'm still quite new to JS and learning it.

I have a bootstrap slider with images on each slides. What I'd want to do is to make the images appear after a small delay on the slide (the slide in which the said image is). So far, I made it only with the first slide and if I apply my class to the other images on the slides, they will appear when the document is ready and not on slide.

My JS looks like that so far:

$(document).ready(function() { 
  $('.foo').hide().delay(1).fadeIn(2200); 
});

As such, everything will fade in after the delay. How can I isolate the fadeIn to apply it only when the user goes to the said slide?

Sorry if I'm not 100% clear, feel free to tell me.

Answer 1

I've assumed you've used the default bootstrap carousel i've gone for a quick and dirty method too help you understand what i'm doing.

first i'm selecting the two buttons used for changing image and putting them in an array looping over them and adding the fadeIn function to its on click handler meaning when it clicks it will fire fadeIn.

Now we need to define fadeIn, fadeIn goes over all the images and adds the class fade-in which will handle the styling and the animation we add an event handler 'transitionend' to fire when the animation stops we remove the class after ready for the next fire.

we can go much futher than this making sure to add the class to just the image thats coming into transition we can add delay with animation-delay in css but this basic example should help you find your way.

Things used:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

Using CSS for fade-in effect on page load

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

const next = document.querySelector('.carousel-control-next');
const prev = document.querySelector('.carousel-control-prev');
const images = document.querySelectorAll('.carousel-item');
const buttons = [next, prev];

buttons.forEach(el => {
  el.onclick = fadeIn
});


function fadeIn() {
  images.forEach(image => {  
    image.classList.add('fade-in');
    image.addEventListener('transitionend', (e) => image.classList.remove('fade-in'));
  });
}

.fade-in {
  -webkit-animation: fadein 4s;
  animation: fadein 4s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>