I want to create a carousel with images that fadeIn on the image getting active and fadeOut just before the active image switch to another image.

For now I only can make the part where the image fadeIn. I would like it to fadeOut just before it switches to another image.

Here is my code:

<!--Carousel Wrapper--><br />
<!--Indicators--><!--/.Indicators--><br />
<!--Slides--></p>
<p><img src="http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(1).jpg" alt="First slide" /></p>
<ul>
<li>
Material Design for Bootstrap 4
</li>
<li>
The most powerful and free UI KIT for Bootstrap
</li>
<li><a href="http://mdbootstrap.com/getting-started/">Sign up!</a></li>
<li><a href="http://mdbootstrap.com/material-design-for-bootstrap/">Learn more</a></li>
</ul>
<p><img src="http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(2).jpg" alt="Second slide" /></p>
<ul>
<li>
Lots of tutorials at your disposal
</li>
<li>And all of them FREE!</li>
<li><a href="http://mdbootstrap.com/bootstrap-tutorial/">Start learning</a></li>
</ul>
<p><img src="http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(3).jpg" alt="First slide" /></p>
<ul>
<li>
Visit our support forum
</li>
<li>Our community can help with any question</li>
<li><a href="http://mdbootstrap.com/forums/forum/support/">Support forum</a></li>
</ul>
<p><!--/.Slides--><br />
<!--Controls--></p>
<p><span>Previous</span><br />
<span>Next</span></p>
<p><!--/.Controls--></p>
<p><!--Carousel Wrapper--></p>