Daniel Santos free asked 5 years ago


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>

Mirosław Stasiak free commented 5 years ago

Please, enter your code correctly. It is difficult to read now.

Daniel Santos free commented 5 years ago

Thank you for your interest Miroslaw. I don't know how to make the code appear correctly. I tried also with the code tag but it appears the same as above. Any way, I did it with a sliding carousel. My page is gonna stay like that.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags